Media queries in CSS are used to apply different CSS styles based on the screen size, resolution, and other characteristics of the user device. Media queries uses @media rule to include a extra block of CSS properties when a certain conditions are met. Media queries can also be used to style printable version of page separately.
Syntax
@media not|only mediatype and (media feature) and (media feature){
CSS-Code;}</pre>
Here, media-type can be things like screen, print, speech, etc., and media-feature can be characteristics such as width, height, aspect ratio, orientation, and more.
You might have noticed that the same website looks different on mobile and desktop devices. This type of screen depended styling is achieved using CSS media queries. In this tutorial, we will learn about media queries and the properties associated with them.
Media Types
Media types are used in CSS media queries to apply different styles based on device. The most common media types are all, print, and screen. If you don't specify a media type, it matches all devices.
- all: Default Value. This value applies to all media types.
- print: This value is only valid when printing the document.
- screen: This value is only valid for screens, such as computers, tablets, and smartphones.
JavaScript provides a CSS object model interface called CSSMediaRule, which can be used to access the rules created using the @media CSS at-rule.
CSS Media Type Print
Sometimes the print version generated for user doesn't require all the styling shown in screen. The print version generally generated in grayscale style or with simple light colors. This type of designing is recommended, as dark backgrounds will consume more ink from printer.
Example
Following example demonstrates use of a CSS media query with the media type print.
Open Compiler
<!DOCTYPE html><html><head><style>body{ background-color: black; color: white; padding: 10px; } @media print { body { background-color: white; color: black; padding: 10px; } } button { background-color: aqua; padding: 5px; } </style></head><body><h3> Tutorialspoint </h3><p>CSS Media Type - Print</p><p> Background is white for printable version of this page. Check out... </p><button onclick="printPage()">Print Page</button><script> function printPage() { window.print(); } </script></body></html></pre>CSS Media Type All
This is used to specify common styling that used in all screen sizes, printable version and other versions.
Example
The following example demonstrates the use of a CSS media query with the media type all
Open Compiler
<!DOCTYPE html><html><head><style>@media all { body{ background-color: black; color: white; padding: 10px; } } </style></head><body><h3>Tutorialspoint </h3><p> CSS Media Type - All </p><p> In printable version or any screen size, the styles of this page is same. </p><button onclick="printPage()"> Print Page </button><script> function printPage() { window.print(); } </script></body></html></pre>CSS Media Type Screen
This value is only valid for screens, such as computers, tablets, and smartphones.
Example
The following example demonstrates that if the screen size is greater than 500px, the background color changes to pink and text color changes to blue
Open Compiler
<!DOCTYPE html><html><head><style>.container { display: flex; flex-direction: row; padding: 10px; gap: 10px; } .child{ padding: 10px; background-color: #f0f0f0; border: 2px solid; } @media screen and (max-width: 500px) { .container { flex-direction: column; } } </style></head><body><p> Orientation of child elements depend on screen size, for screen size less than 500px, children align in two different columns. </p><div class="container"><div class="child" > HTML </div><div class="child"> CSS </div></div></body></html></pre>Width Ranges for Media Queries
In media Queries, you can also specify screen width range like this.
@media (width > 700px){/* Styles for screens that are at least 700px wide */}Example
The following example demonstrates that when the screen width is between 600px and 800px, the background color changes to yellow and text color changes to red.
Open Compiler
<!DOCTYPE html><html><head><style>p { color: blue; } @media (600px < width < 800px) { p { background-color: yellow; color: red; } } </style></head><body><h1>Tutorialspoint</h1><p>CSS Media Type - Screen</p><p>Resize the browser size to see the effect.</p></body></html></pre>Comma Separated Media Types
A comma in media query is similar to logical 'OR' operator.
The following declaration will applying to screen width less than 500px or for printable versions. You can also use OR operator instead of comma.
@media (min-width: 500px), print{/* Styles */}Example
The following example demonstrates using media types with comma separation. The background color changes when in print mode and also for screen size is > 500px
Open Compiler
<!DOCTYPE html><html><head><style>body { background-color: white; color: black; } @media (min-width: 500px), print { body { background-color: black; color: white; } } button { background-color: violet; padding: 5px; } </style></head><body><h1>CSS Media Type - Screen and Print</h1><p> Resize the window to less than 500px to see the background and font color changes to default. </p><p> Click on below button to see the effect when you print the page. ( Enable background graphics options if any at print section ) </p><button onclick="printPage()">Print Page</button><script> function printPage() { window.print(); } </script></body></html></pre>CSS Media Type With Only
Media Type With Only applies the style only if the entire media query matches. This can be helpful to prevent older browsers from applying styles.
Example
The following example demonstrates that when the screen width is between 500px and 700px, the background color changes to pink and text color changes to blue
Open Compiler
<!DOCTYPE html><html><head><style></p></body></html>body { color: red; } @media only screen and (min-width: 500px) and (max-width: 700px) { body { color: blue; background-color: pink; } } </style></head><body><h1>Tutorialspoint</h1><p>CSS Media Type - Screen</p><p> Resize the browser window to see the effect.CSS Media Queries AND Operator
The AND operator is used to combine multiple conditions in a media query. Both conditions must be true for the styles to apply.
Example
This example demonstrates when screen width is between 500px and 700px, style will be added.
Open Compiler
<!DOCTYPE html><!DOCTYPE html><html lang="en"><head><style>body { background-color: lightgray; color: black; } @media (min-width: 500px) and (max-width: 700px) { body { background-color: lightgreen; color: blue; } } </style></head><body><h1> Media Query with AND Operator</h1><p> Resize the browser window between 500px and 700px to see the effect. </p></body></html></pre>Media Queries NOT Operator
The NOT operator negates a media query, applying the styles only if the media query does not match.
The NOT operator is evaluated last in a media query, so the above media query would be evaluated as follows:
@media not (all and (monochrome)){/* */}/* It's not evaluated like this:*/@media (not all) and (monochrome){/* */}Example
In this example NOT operator negate the condition width < 700.
Open Compiler
<!DOCTYPE html><!DOCTYPE html><html lang="en"><head><style>body { background-color: lightgray; color: black; } @media not screen and (width < 700px) { body { background-color: orange; color: white; } } </style></head><body><h1> Media Query with NOT Operator </h1><p> Resize the browser window to less than 700px to see the effect. </p></body></html></pre>Creating Complex Media Query
You can create complex media queries by combining multiple conditions using the and, not, and only operators. You can also combine multiple media queries into a comma-separated list.
Example
In this example we combined multiple media queries, try changing browser width to see multiple effects.
Open Compiler
<!DOCTYPE html><html><head><style>body { background-color: lightgray; color: black; } @media only screen and (min-width: 500px) and (max-width: 700px) { body { background-color: pink; color: blue; } } @media not screen and (max-width: 700px) { body { background-color: orange; color: white; } } </style></head><body><h1> Media Query with AND, NOT, and ONLY Operators </h1><p> Resize the browser window to see the effects. </p></body></html></pre>CSS Media Queries For Screen Orientation
We can define style for specific orientation (landscape or portrait) of user device. The default value for this is portrait.
@media (orientation: portrait){/* Styles */}Example
The following example demonstrates that when the screen width is greater than 500px and the device is in landscape orientation, the text color changes to blue
Open Compiler
<!DOCTYPE html><html><head><style>body { color: red; } @media (min-width: 500px) and (orientation: landscape) { body { color: blue; } } </style></head><body><h3>Resize the browser window to see the effect.</h3><p> The text color changed to blue when the viewport width is at least 500px and the device is in landscape orientation. </p></body></html></pre>
Leave a Reply