Media Queries

Media queries are useful when you want to modify your site or app depending on a device’s general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

Media queries are used for the following:

  • To conditionally apply styles with the CSS @media and @import at-rules.
  • To target specific media for the <style>, <link>, <source>, and other HTML elements with the media= attribute.
  • To test and monitor media states using the Window.matchMedia() and MediaQueryList.addListener() JavaScript methods.

CSS3 Media Types: all, print, screen, speech

In HTML

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

In CSS

@media screen {
  body {
    width: 75%;
  }
}
Or:
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  body {
    background: #ccc;
  }
}