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

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

Example 2

/* 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.

Reference

CSS Misc

  1. Computed Style
  2. Pseudo Class vs Pseudo Element
  3. Media Query
  4. Variable
  5. calc
  6. Reset
  7. user-select
  8. Data URI Scheme
  9. protocol-relative URL
  10. Default Unit
  11. Declaring Character Set in CSS File
  12. Jargons Explained: Tag, Element, Node, Object, Attribute, Property, Method
Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

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

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Object Ref
  5. DOM Scripting
  6. SVG
  7. Blog