WHAT IS MEDIA QUERY?

Media query is the heart of responsive CSS, and we use it to apply custom CSS rules only when certain conditions are met. For example, we can apply different CSS rules to different screen sizes, we can use it to transform the layout of a web page to look differently on different screen sizes.

/* ON REGULAR DESKTOP SCREEN SIZES */
#contents{ width:60%; }
#sidebar{ width:40%; }

/* [ON TABLETS & SMARTPHONES] */
@media screen and (max-width: 768px){
  #contents, #sidebar{ width:100%; }
}

MEDIA QUERY SYNTAX

Just how do we work with media query? It is quite straightforward:

• You declare a media query with the @media syntax.
• Followed by the type of media, which is the screen in most cases.
• We then append the media features to when this set of the query will be applied. Finally, we enclose the CSS to apply within enclosed curly brackets.

MEDIA TYPES

There are different types of media that we can target, and here are the common ones.

MEDIA FEATURES

You can also specify a who load of features, but here are the common ones.

/* Min width - Will only apply when the width is at least 768px, I.E. from 768px to infinity */
/* Example usage - show a sidebar when the screen is wide enough */
@media screen and (min-width:768px) {
  #sidebar{ 
    width:30%;
    display:block;
  }
}

/* Max width - Will only apply up to 768px, I.E. from 1px to 768px */
/* Example usage - hide the sidebar when the screen is not wide enough */
@media screen and (max-width:768px) {
  #sidebar{ display:none; }
}

/* Aspect ratio - Will only apply on this aspect ratio */
/* Example usage - Sticky the header only when the screen has enough space */
@media screen and (aspect-ratio:16/10) {
  #header{ display:sticky; }
}

/* Orientation */
/* Example - Showing/hiding the sidebar */
@media screen and (orientation:portrait) {
  #sidebar{ display:none; }
}
@media screen and (orientation:landscape) {
  #sidebar{ display:block; }
}

You can visit the official W3C website for a complete list of media features that you can target.

COMPLEX QUERIES

TARGETING MEDIA TYPES

/* Simply use comma to target multiple media types */
@media screen, print{}

/* You can also use the Boolean NOT to target */
/* This will target everything else that is not print */
@media not print{}

/* The ONLY keyword is kind of confusing - It is used to hide queries from older browsers */
/* As there is no "only" media type in CSS, the entire section will be ignored by older browsers */
@media only screen{}

MULTIPLE FEATURES

Yep, just like Javascript, we can use the Boolean NOT, AND, OR to target multiple features.

/* Show the side bar if it is at least 768px wide AND in landscape position */
@media screen and (min-width:768px) and (orientation:landscape){
  #sidebar{ display:block; }
}

/* Hide the sidebar in portrait mode OR when the width is less than 768px */
@media screen and (max-width:768px) or (orientation:portrait){
  #sidebar{ display:none; }
}

VIEWPORT META

With media query, you have won the responsive CSS battle game by 95%. As for the final piece of the puzzle, you need to put a viewport meta tag in the head section of your HTML.

What this piece of meta tag does:

• width=device-width sets to display the website to fill the entire width of the device.
• initial-scale sets the initial scale to display the website at 1X.

As to why this viewport meta tag is important, I will need to explain a bit of history – Websites were only made for big screens in the past. So when smartphones were invented, the mobile browsers had to automatically scale the large websites to fit onto the small screens.

Today, this automatic scaling somehow became a “modern-day minor nuisance” instead. If you don’t define that viewport tag, mobile browsers may scale your website out-of-proportion and potentially destroy the first impressions with your users. So better safe than sorry, and it takes only 1 minute to copy-and-paste that meta tag in.

THE CHEATSHEET