Websites in this day and age must cater to an ever growing market of mobile users on top of desktop users. From a web designer’s perspective this means it is critical to insure a website’s front-end adapts and responds to varying screen sizes. This translates to developing with a wide range of design intentions in mind, from maintaining readable text content and fonts across different screen sizes to insuring the layout remains consistent or appears as expected across any screen size.
Probably the most flexible approach using CSS is writing CSS media queries at specified screen widths. These are CSS styles that the browser will specifically implement only at the given screen width size of the browser’s viewport. Media queries can also instead specify height of the viewport, width or height of the device, orientation, (checks if device is in landscape or portrait mode) and resolution. With creative use of CSS style’s using media queries at different screen sizes, the HTML DOM can be tailored to look completely different on different devices or screen sizes.
Media queries offer more flexibility with the optional media type. Media types include:
This is detailed further on media query’s MDN page. But for the purpose of this guide, we won’t need to specify a media type.
Other CSS Techniques in comparison
There are other mobile responsive design techniques in CSS including flexbox, grid or CSS frameworks like Bootstrap that can sometimes better handle the responsive design for you. For developing relatively simple layouts with mobile responsiveness quicker, these techniques are likely to be the better choice as they will typically involve writing less lines of code (mainly CSS).
However there are advantages of CSS media queries in comparison. Personally, I find that it is more flexible because of two main reasons.