CSS: Media Query

By Xah Lee. Date: . Last updated: .

You can use CSS “Media Query” to set what CSS to use depending on user's window size.

Example 1

/* current viewport width w is 1000 ≤ w ≤ 1500 px */
@media screen and (min-width: 1000px) and (max-width: 1500px) {
 body {background-color:cyan}
}

Example 2

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

/* current viewport width is ≤ 1023 px */
@media screen 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.

Reference

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.