1.5 KiB
| title |
|---|
| Media Queries |
Suggested Reading:
Using media queries - MDN web docs
Also see the Responsive Web Design Principles section on Beta
Draft of Article:
Media queries are sets of rules that define CSS properties. You can set media queries to change the appearance of your content based on how your content is viewed.
Media queries can determine your content's appearance in different displays. Some examples of different displays are: images on a computer screen, text in print, or web pages in an audio screenreader.
In web pages, some elements may not display consistently across different screen sizes. You can use media queries to set special rules for small and larger screens.
Here is an example of a media query that sets the size of body text on a phone screen:
@media screen and (max-width: 450px) {
body {
font-size: 12px;
}
}
This media query stipulates that for screen sizes up to 450 pixels in width, the body text should display in a 12px font size.
Media queries can be helpful in responsive web design.