3.4 KiB
| title |
|---|
| CSS3 Media Queries |
CSS3 Media Queries
Media queries allow you to design a website differently for different devices/screen sizes. Their introduction in CSS3 has greatly eased the building of responsive webpages.
The best approach when designing a responsive website is to think mobile first - meaning that you design the mobile version of your site first and scale up for larger devices. Using relative units of size (like %, vw or vh) will not guarantee your page adapts perfectly to any device, especially for complex layouts! Media queries let you specify breakpoints where different styles will be applied.
When designing your page for smaller devices, you should focus on the main content. On a bigger screen, you will want to adjust font sizes, margins, padding, etc. to keep your site readable, but you may also want to add secondary content to fill in the space created by the screen size.
The thought process for responsive design should be:
- Which content to show?
- How to create the layout of the page?
- Which size to use?
The basic syntax
@media only screen and (min-width: 768px) {
p {padding: 30px;}
}
p tags will have 30px of padding when the screen width is at least 768px.
The AND syntax
@media only screen and (min-height: 768px) and (orientation: landscape) {
p {padding: 30px;}
}
p tags will have 30px of padding when the screen height is at least 768px AND its orientation is landscape.
The OR syntax
@media only screen and (min-width: 768px), (min-resolution: 150dpi) {
p {padding: 30px;}
}
p tags will have 30px of padding when the screen width is at least 768px OR its resolution reaches 150dpi.
And beyond!
Additional tips for using media queries, such as the not operator and examples of greater specificity, can be found [https://css-tricks.com/logic-in-media-queries/](in this article from CSS Tricks.)
Beyond their core use for mobile-first web design, media queries can also greatly improve web accessibility. Here are a few examples:
- Adjusting for screen readers that convert website text to speech for people with visual impairments (for example, ignoring non-essential text).
@media speech {
/* ... */
}
-
Allowing for more graceful zooming in for people with visual impairments.
-
Allowing smoother experiences for those who prefer or need less animation to read a page.
@media (prefers-reduced-motion: reduce) {
.animation {
animation: none;
-webkit-animation: none;
}
}
- Restyling a page for printing as opposed to reading on a screen.
@media print {
/* ... */
}