Media queries

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%;
}

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

Design for the small screen first
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;
  }
}

The Web is for everybody

Media queries

Or other things

Do not use pixels—use em

Converting px to em

Common media query widths

Always start small!

Videos & tutorials