A quick introduction to what media queries are, what they’re trying to achieve, and how they’re used.

Go fullscreen: ⌃⌥F

Media queries

The Web is for everybody

It’s our job as web designers to make our website work in as many situations as possible

The web is responsive by default—if it doesn’t work on a specific device it’s your fault!

HTML
<!-- Tells the browser we support whatever size it is & not to zoom in -->
<meta name="viewport" content="width=device-width,initial-scale=1">
CSS
html {
  /* Tells the browser not to automatically scale the fonts—we want complete control */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

Media queries

Detect the dimensions of the user’s screen and make layout adjustments

  • minimum width/height, orientation

Or other things

  • print, black & white, retina, touch, mouse, etc.

Do not use pixels—use em

Try to avoid using pixels in media queries—they make us think in terms of devices instead of content

Our media queries should be based on content irregularities not on device sizes

Converting px to em

Divide by 16 (the browser’s default size)

400px ÷ 16 = 25em
960px ÷ 16 = 60em

Common media query widths

  • 25em — small screens
  • 38em — medium screens
  • 60em — large screens
  • 90em — extra large screens

I found these numbers work for me based on making lots of websites and seeing what numbers appear most often

Always start small!

Media queries compound on top of each other and rely on the previous CSS

  1. Design for the small screen first
  2. Add media queries when the content becomes awkward

Do not start on large screens first—it doubles the amount of CSS you need to write!

HTML
<h1>Media queries</h1>
CSS
h1 {
  background-color: red;
}

@media only screen and (min-width: 25em) {
  h1 {
    background-color: green;
  }
}

@media only screen and (min-width: 38em) {
  h1 {
    background-color: yellow;
  }
}
HTML
<ul>
  <li>Pteranodon</li>
  <li>Quetzalcoatlus</li>
</ul>
CSS
ul {
  padding: 0;
  list-style-type: none;
}
li {
  padding: .5em .7em;
  background-color: #00675a;
  color: #fff;
}
@media only screen and (min-width: 60em) {
  ul { text-align: center; }
  li { display: inline-block; }
}
HTML
<section>
  <h2>Hot Pink Purses</h2>
  <article>
    <h3>Pretty Pink Clutch</h3>
    <p>Just the right size to carry only what you need.</p>
    <a href="#">Buy now</a>
  </article>
  <article>
    <h3>Misty Morning Handbag</h3>
    <p>It’s bigger on the inside—a total bag of holding.</p>
    <a href="#">Buy now</a>
  </article>
</section>
CSS
section {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "col1" "col2";
  gap: 1rem;
}
h2 {
  grid-area: header;
}
@media only screen and (min-width: 38em) {
  section {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "header header"
      "col1   col2";
  }
}
HTML
<header>
  <h1>Quetzalcoatlus</h1>
  <nav>
    <ul>
      <li><a href="#env">Environment</a></li>
      <li><a href="#diet">Diet</a></li>
      <li><a href="#size">Dimensions</a></li>
    </ul>
  </nav>
</header>
CSS
@media print {
  nav {
    display: none;
  }
}
Start

A quick introduction to what media queries are, what they’re trying to achieve, and how they’re used.