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">
/* Same as the HTML viewport, but for different browsers */
@-moz-viewport { width: device-width; scale: 1; }
@-ms-viewport { width: device-width; scale: 1; }
@-o-viewport { width: device-width; scale: 1; }
@-webkit-viewport { width: device-width; scale: 1; }
@viewport { width: device-width; scale: 1; }
html {
/* Tells the browser not to automatically scale the fonts—we want complete control */
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-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 screens38em— medium screens60em— large screens90em— 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>
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>
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
<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>
@media print {
nav {
display: none;
}
}