Let's talk about media queries and the media at-rule. The media at rule can be used to style an element based on the result of one or more media queries. In layman's terms a media query is the browser going hey what kind of device am I on and what are its characteristics. This can then change the styling of a web page if the characteristics of the user device match certain criteria set by the developer. You can then have multiple queries to handle different devices and environments. Be careful however, adding too many media queries can slow down your load times.
Syntax
A media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in ìvarious ways using logical operators.
So that's a big mouth full. Let's break this down a little bit.
Media type is what broad category of output device (print , screen or all) that the query applies to. The media feature is a specific characteristic of that user agent output device. An example media query would be
@media screen (min-width: 1400px) {
p {
color: #000;
}
}
The above query will make all paragraph elements black if the users viewport is 1400 pixels or larger. Like most css this is a fairly simple concept and it's all about how you use it. For more information about specific media features and logical operators I would suggest checking out mdn
Responsive design and grid
Media queries are an essential part of creating a responsive design. While there are many use cases for media queries, breakpoints in a grid system are my favorite. A breakpoint here means a specific size at which the layout will change in some way. Think of a site with 3 columns of text. This looks great on a 20" gaming monitor. But you might want the information in a single column on a mobile device for readability. You can set a breakpoint for a screen size of a mobile (about 500px) so if viewed this way all text will be in a single column.
Bootstrap
A great example of media queries for responsive design is the css framework bootstrap. This framework has 6 default breakpoints you can set for any given element. This means that specified element will change how it fits in the layout based on screen size while keeping other elements the same. I highly suggest having a look through the source code for bootstrap and seeing how they use media queries. It's how I really started to understand them. Have fun styling your sites.
Oldest comments (0)