Media Queries DEmystified

Media Queries are additional CSS rules defined in a style sheet that can alter the properties and values of HTML elements and selectors depending on the size of the browser window or mobile device screen size to make the layout Mobile Responsive.

When designing a Web page layout for a desktop display, some page elements may look best arranged side-by-side using floats, but on a tablet or smart phone, the same content might be better displayed with the elements stacked above one another.

Different ranges of screen widths for different displays or device viewports are commonly referred to as Mobile Breakpoints.

Since the CSS cascade uses “Order of Appearance” to render results in the browser session, Media Queries are normally written at the end of the style sheet so they load last in a particular order. Since every design is different, and there are many target device screen sizes, there are no absolute rules for defining media queries – and these are subject to change as screen resolutions evolve over time (yeah that sucks).

However, there are established breakpoints that most mobile devices and desktop displays have in common. Most Web page designs only require 3-5 media queries to accomplish an elegant mobile responsive layout despite the fact there are so many different device screen sizes.

The following is the set of Media Queries (with comments) defining the breakpoints used in this website to make the layout mobile responsive:

/* Large screens (1405px and above) */
@media only screen and ( min-width: 1405px ) {
/* css rule modifications for this screen size goes here */
}

/* Laptops and desktops (1100-1405px) */
@media only screen and ( min-width: 1100px ) and ( max-width: 1405px) {
/* css rule modifications for this screen size goes here */
}

/* Tablets in landscape mode (981-1100px) */
@media only screen and ( min-width: 981px ) and ( max-width: 1100px ) {
/* css rule modifications for this screen size goes here */
}

/* Tablets in portrait mode (768-980px) */
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
/* the modifying css rule goes here */
}

/* Smartphones in landscape mode (480-768px) */
@media only screen and ( min-width: 480px ) and ( max-width: 767px ) {
/* css rule modifications for this screen size goes here */
}

/* Smartphones in portrait mode (0-479px) */
@media only screen and ( max-width: 479px ) {
/* css rule modifications for this screen size goes here */
}

Max-Width vs. Min-Width:

max-width: The media query is triggered at a screen size EQUAL TO or LESS THAN the specified width.
min-width: The media query is triggered at a screen size EQUAL TO or GREATER THAN the specified width.
min-width and max-width: The media query is triggered BETWEEN the two specified widths.

Note: CSS stylesheets that target mobile devices first, and then have media queries for laptops and desktops normally use min-width because the media query is only triggered for larger displays. Likewise, stylesheets designed for desktops and laptops, might use max-width because the media query is triggered only for mobile devices.  More complex stylesheets often use both min-width and max-width media queries to set the breakpoints within a range of screen widths.

HTML Structure | HTML for Media Queries
In the following example, we are using basic semantic HTML5 elements to create the structure for a simple mobile responsive layout:

<header>header</header>
  <main>
    <article>article</article>
    <aside>aside</aside>
  </main>
  <footer>footer</footer>

Media Query Sytax | CSS for Media Queries
Media Query syntax is written as a value for the screen size target and wraps a previously defined rule in the style sheet with new properties and values. You can think of it like a rule nested inside a rule with the same HTML element or selector name. The media query syntax uses its own set of curly brackets to contain the modified rule:

@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {

article{
width: 49%;
}

aside{
width: 49%;
}

}

@media only screen and ( max-width: 767px ) {

article{
width: 100%;
}

aside{
width: 100%;
}

}

Note: Notice how the media queries only specify modifications to the rules. This is because nothing else previously defined in the rules will change at these screen size breakpoints. Repeating properties and values already specified for media queries would be redundant because they are already loaded in the stylesheet:

Mobile Breakpoints | Figure 6
If you resize your browser window, you will see that the example layout changes the <article> and <aside> elements to have equal widths of 49% for a tablet screen size between 768px and 980px. A width value of 49% instead of 50% is used to accommodate padding which is calculated in width by default. Then, at a smartphone breakpoint lower than 767px, the <article> and <aside> elements have a width of 100%, within the parent element, and therefore stack above one another.

Most browser developer tool consoles also have the option of viewing breakpoints for any Web page browser session. This is a great way to visualize media queries. With this feature, you can preview your design and choose from a variety of device breakpoints to simulate how your design will layout on different screen widths.