Media Queries in CSS
Introduction
Media queries are the backbone of the Responsive Web Design system.
By using media queries we can customize the behavior of DOM elements on the screen for particular devices or screen sizes without changing the actual markup. Media queries use certain breakpoints in the CSS file to change the styling of the HTML elements.
What exactly is a Media Query?
Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true. Media queries can be used to check many things, such as:
- width and height of the viewport
- width and height of the device
- orientation (is the tablet/phone in landscape or portrait mode?)
- resolution
Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.
You can also use media queries to specify that certain styles are only for printed documents or for screen readers (mediatype: print, screen, or speech).
In addition to media types, there are also media features. Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device. For example, you can apply styles to only those screens that are greater, or smaller, than a certain width.
A Simple Example
The media type allows us to declare what type of media the rules should be applied to. Expressions allow you to further target devices based on specific conditions you pass the media query. Media features can also be combined within the media query to provide greater control over targeting devices and clients. Finally, within the media query’s curly braces, CSS rules can be toggled when a condition is met that satisfies both the media type and expressions.
In Conclusion
Media queries allow designers to build experiences for a wider range of devices than ever before. More importantly, they allow you to fine-tune your designs for an increasingly mobile audience. I hope this small intro into the world of media queries has been helpful. Feel free to reach out to on LinkedIn and happy coding!