In this article we will be explaining what media queries are, the use of media queries in responsive web design , why they must be used, the challenges that media queries solve, and how this challenges were overcome before the invention of media queries, but there will be no CSS code as examples as this only talks about CSS media queries and it's benefits.
What are media queries
First of all let's look at what a CSS media query is and what it does : According to the MDN documentation "Media queries allow you to apply CSS styles depending on a device's general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width.
According to the definition above CSS media queries allows you to apply styles on a website depending on a devices characteristics such as print or screen.
As this article focuses on responsive web design using CSS media queries we will only be looking at how media queries work based on the size of a screen(screen resolution).
Use of media queries
Now how does CSS media query apply to responsive web design?
When writing out CSS code for the design of a website the CSS code output only tells the frontend developer how the website will look based on he/she's devices screen size or browser viewport height and width but the issue is when this site is pushed into production users will not always have the same screen size as the frontend developer and as a result the whole site might look messy and terrible if the user and front end developers screen size are far apart and in some cases some elements won't render properly and some elements might not even show at all.
This is where the developer has to use CSS media queries along with browser developer tools which mostly come as a package with the browser, with the use of the browser developer tools the frontend developer is able to simulate differing screen sizes and is able to see how the CSS code output looks across different screen sizes and with this the frontend developer is able to go back to his CSS code, create a media query for different screen widths and heights to apply a different CSS style to an element different from the one originally applied therefore making the site still look good and beautiful on the widths and heights specified in the media query and with this the issue of the site looking messy on different screen is eliminated making the site look pleasant for all users.
Before media queries
Now before the use of media queries responsive web design was achieved using methods like:
*Flexbox and grid, viewport units (i.e vw and vh)
*Mobile subdomains which involved creating one site for users with big screens like laptops and tablets and users with small screen such as mobile devices, fluid images.
*JavaScript and user agent sniffing where JavaScript is employed to detect the device screen size of a user and apply styles accordingly.
However the above methods are very ineffective and are not used by frontend developers in the present day as media query already provides a very efficient and better alternatives to this methods.
Thanks to media queries every user is able to enjoy the internet on whatever device they are using while simultaneously making the work of frontend developers easier as they don't have to go through rigorous methods to apply styles across different screens.
For more information on media queries and a deeper dive with code examples on how media queries are implemented I recommend this MDN article:https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries&ved=2ahUKEwjLorm5-9GAAxUxTUEAHYgrAKMQFnoECAkQAQ&usg=AOvVaw1v_p3zTt_PZsCrt2oJc1wF
Top comments (0)