CSS Media queries are a way to apply styles by targeting specific physical characteristics of the browser, like viewport size. Viewport size is the size of the browser window on a web browser, or the size of the device screen on a smart phone. Media queries consists of a media type and zero or more expressions that check for the conditions of particular media. When the expressions match the physical characteristic they activate style definitions that usually overwrite previous style definitions so the page remains responsive, for example, to changes in the viewport. Media queries originated from media types.
Media Types
In CSS2.1, media types specify how a document is to be presented on different media: on the screen, paper, a speech synthesizer, a braille device, projected TV, etc. It uses the @media rule.
It’s possible to target different @media rules within a stylesheet, allowing difference between print:
@media print {
body { font-size: 10pt }
}
and screen:
@media screen {
body { font-size: 13px }
}
Media Queries
CSS3 grafted media queries. onto media types. Media queries allow the physical characteristics of the media determine how the CSS layout is to be rendered. That allows designers to tailor the presentation of the media to different devices without changing the content. The content dynamically adapts to changes in the viewport.
A media query consists of a media type and zero or more expressions that check for the conditions of particular media features like height, width, and orientation. A change in the width, height, or orientation of the viewport triggers the media query to switch styles in real time.
This mobile example is best experienced on a smart phone as it is set to toggle between portrait and landscape orientations and changes as you orient your phone vertically or horizontally. You can also change the viewport by changing the width of the window.
/* Portrait */
@media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
/* Landscape styles */
}
Media conditions that can be queried
A list of different queries that can be addressed from a device. Device can mean the full screen of a device or the display of a browser window. Conditions in bold are most used.
- width
- height
- device-width
- device-height
- orientation (portrait or landscape)
- aspect-ratio
- device-aspect-ratio
- prefers-color-scheme
- color (how many colors the device is capable of)
- color-index
- monochrome
- resolution (including retina display)
- scan
- grid
How Media Queries Work: Boolean Logic
You may query as many media as you like using boolean operators to determine the logic of each query.
Use “and” to specify in addition to and “,” to specify or, as in this example @media all and (min-width: 700px) and (max-width: 900px), (orientation:landscape) , which reads, for all media, the minimum width is 700px and the maximum width is 900 pixels, or the orientation is landscape. You can also use negation by writing out the word “not”.
When using and, both parts have to be true to activate the media query. If using or (“,”) the media query is true if any one part is true.
The most common way to use media queries is to create a separate media query for each size, and use CSS to override the previous media query with a subsequent media query:
/*default styles for large computer monitor */
@media only screen and (min-width: 1200px) {
/* Style adjustments for laptops*/
}
@media only screen and (min-width: 800px) {
/* Style adjustments for tablets*/
}
@media only screen and (min-width: 480px) {
/* Style adjustments for phones*/
}
How to Use
Like media styles, media queries can be used to change the style sheet or change the style within a single stylesheet. I’ve rarely encountered changing the style sheet. Use media queries to change the style within a stylesheet.
Changing Stylesheets
Example (download ) Changing the window to 700 or less pixels wide selects the “narrow.css” external style sheet to determine the style, “medium.css” determines the style when the viewport is between 701 to 900 pixels wide and the “wide.css” determines the style when the viewport is wider than 900 pixels.
The three stylesheets are switched in real time as the window is resized.
<link rel='stylesheet' media='screen and (max-width: 700px)' href='narrow.css' > <link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='medium.css' > <link rel='stylesheet' media='screen and (min-width: 901px)' href='wide.css' >
Changing Styles within a Stylesheet
The more common approach is to use media queries within a single style sheet.
The @media rule comes first, an opening bracket, the css rules to be affected and a closing bracket:
@media all (max-width: 900px) {
section {width: 480px;}
article {width: 480px; background-color: red;}
}
Demonstration of media queries integrated within the stylesheet itself.
Where to Place Media Queries?
Media queries are placed at the bottom of the CSS style sheet. This allows whatever rules activated by the media queries to override existing definitions, initiating a change in the layout.
To keep scrolling to a minimum while writing the CSS, I recommend writing the rules right after the selectors, one property after the other, rather than each property on its own line.
Locking Down the Viewport and Zoom
When the iPhone was released it needed a way to resize existing website so that they fit. It assumes a viewport of 980 pixels and zooms it to fit the website to the screen resolution by default, unless you tell it not to. This requires the following code in the header:
<!- This sets the viewport to the device (iPhone) screen size, and forces the zoom to be 1:1 ================================================ --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >
Two approaches to building a responsive website.
Develop the smallest layout first and use @media queries to address larger viewports or start with the largest viewport and work your way down to the smallest. The following example uses three break points: below 600px for phone, below1000px for tablet, and below 1400px for laptops. Anything above targets large computer motors.
Use min-width to scale up from the the smallest viewport and max-width to scale down from the largest viewport.
Phone First
/* Default styles for smart phones */
@media only screen and (min-width: 800px) {
/* Style adjustments for tablets*/
}
@media only screen and (min-width: 1200px) {
/* Style adjustments for laptop screens*/
}
@media only screen and (min-width: 1600px) {
/* Style adjustments for large computer monitors*/
}
Large Computer Monitor First
/*default styles for large computer monitor */
@media only screen and (max-width: 1200px) {
/* Style adjustments for laptops*/
}
@media only screen and (max-width: 800px) {
/* Style adjustments for tablets*/
}
@media only screen and (max-width: 480px) {
/* Style adjustments for phones*/
}
View Websites in Different Viewports
In Safari access the Enter Responsive Design Mode (Option-command R) to see all the possible sizes at once (you will need to have clicked on the expert mode on the last pane in the preferences). Google and Firefox have a similar feature in the Web Inspector.
Smashing Magazine has good articles, and tools to help you, including a preview of what a device size looks like with Resize my browser window, and a responsive, a way to see your project in all widths at once.
Light/Dark Mode
The light/dark color scheme can automatically switched to the the scheme used by the website. You will need to prepare your CSS for both light and dark schemes. See MDN docs for an example.
@media (prefers-color-scheme: dark) {
}
Additional Resources
Go further by following these links: