CSS: Media Query

By Xah Lee. Date: . Last updated: .

Media Query” applies a set of CSS rules only when a condition is satisfied. Most often used to set CSS depending on user's screen size.

Syntax:

@media all and conditional_expression { css_rules }

Example, Screen Less Than

If viewport width is less than 600px

@media all and (max-width: 600px) {
 body {background-color:yellow}
}

Once you set the rule, you can drag to change window size to see its effect in realtime.

Example, Screen Greater Than

If viewport width is greater than 1000px

@media all and (min-width: 1000px) {
 body {background-color:cyan}
}

Example, Screen Size Between

If viewport width is between 1000px and 1500px.

@media all and (min-width: 1000px) and (max-width: 1500px) {
 body {background-color:cyan}
}

Real World Example

/* if viewport width is ≥ 1024 px */
@media all and (min-width: 1024px)
{
 body {margin-right:220px;}
 aside#xyz
 {
  display:initial;
  width:201px;
  }
 }

/* if viewport width is ≤ 1023 px */
@media all and (max-width: 1023px)
{
 body { margin-right:10px; }

 aside#xyz
 {
  display:none;
  width:10px;
  }
 }

Using Media Query to design site depending on screen size (desktop big display, or cell phone tiny display), is called Responsive Design.

JS in Depth
XAH  BUY NOW

CSS

Basics

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc