Media Query Overview

What are the Media Queries?

  • Key element in responsive design

  • Allow you to apply different styles based on the screen size of the user’s device (viewport)

  • Media Queries ask questions such as: Is the width of the viewport greater than or equal to 768px?

  • Media queries don’t affect the HTML (the actual content and structure of the underlying page) — they only affect the styles that are applied to the page using CSS

  • Media queries are added to your CSS stylesheets

Media Query Example


body {
  background-color: green;
}

@media only screen and (min-width: 576px){
  body {
    background-color: blue;
  }
}

This query is asking “If this is a screen AND is the viewport greater than or equal to 576 pixels?” If so, make the background color blue.