CSS - Media Queries

CSS media queries allow to apply CSS styles to a webpage based on the characteristics of the device or browser viewing the page. With media queries, we can create designs that adapt to different screen sizes, resolutions, and orientations.

Media queries are defined using the @media rule.

Media queries are used for the following:

  • To apply CSS styles conditionally using CSS @media and @import at-rules.

  • To target specific media for the <style>, <link>, <source> and other HTML components using media= attribute.

  • To test media states and monitor them using Window.matchMedia() and EventTarget.addEventListener() methods.

Syntax

@media [media-type] and ([media-feature]) {
   /*  CSS rules to apply when the media query conditions are met */
}

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.

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. But, if you use the not or only logical operators, you must specify a media type.

  • 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.

Logical Operators

Media queries can be combined using logical operators such as listed in the below table:

Logical Operators Explanation
and It combines multiple media features together into a single media query, where each connected feature must be true for the entire query to be true.
comma It combines two or more media queries into a single rule. If any of the media queries in a comma-separated list is true, the entire media statement will also be true.
or This is similar to the comma , operator.
not It can be used to reverse the logic of a condition. The not operator is true only when all media features are false.
only Applies a style only if the entire media query matches. This can be helpful to prevent older browsers from applying styles.
You can't use the not keyword to negate a single condition in a media query, it can only be applied to an entire media query.

CSS Media Type - All

The following example demonstrates the use of a CSS media query with the media type all −

<html>
<head>
<style>
   @media all {
      h3 {
         color: red;
      }
      p {
         background-color: yellow;
         color: blue;
      }
   }
</style>
</head>
<body>
   <h3>Tutorialspoint</h3>
   <p>CSS Media Type - All</p>
</body>
</html>

CSS Media Type - Print

Following example demonstrates use of a CSS media query with the media type print. When webpage viewed on a screen the text color will be red. When you print it, the text will be blue.

<html>
<head>
<style>
   h3,p {
      color: red;
   }
   @media print {
      h3,p { 
         color: blue; 
      }
   }
   button {
      background-color: violet;
      padding: 5px;
   }
</style>
</head>
<body>
   <h3>Tutorialspoint</h3>
   <p>CSS Media Type - Print</p>
   <p>Click on below button to see the effect when you print the page.</p>

   <button onclick="printPage()">Print Page</button>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

CSS Media Type - Screen

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 −

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   h2,h4 {
      background-color: red;
   }
   @media screen and (min-width: 500px) {
      h2,h4 {
         background-color: pink;
         color: blue;
      }
   }
</style>
</head>
<body>
   <p>Resize the browser window to see the effect.</p>
   <h2>Tutorialspoint</h2>
   <h4>CSS Media Type - Screen</h4>
</body>
</html>

CSS Media Type - With Comma

The following example demonstrates using media types with comma separation. The background color changes to yellow and text color changes to blue when in print mode and when screen size is > 500px −

<html>
<head>
<style>
   body {
      color: red
   }
   @media screen and (min-width: 500px), print {
      body {
         background-color: yellow;
         color: blue;
      }
   }
   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.</p>

   <button onclick="printPage()">Print Page</button>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

CSS Media Type - With Only

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 −

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   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.</p>
</body>
</html>

CSS Media Queries - Range

The short and easy new range syntax for media query for testing various features that involve a range.

@media (width > 700px) {
   /* Styles for screens that are at least 700px wide */
}

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 −

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>

Media Features

CSS media feature is used to apply different styles to the webpage based on the a specific characteristic, output device, or environment.

Following is the list of CSS properties related to media features:

Media Features Description
any-hover To check if any of the user's input devices can hover over elements on the page.
any-pointer To determine if the user has a pointing device such as mouse and whether that device is accurate or not.
aspect-ratio To check the aspect ratio of the viewport or the rendering surface.
color To specify the desired number of bits per color component of the output device.
color-gamut To apply different styles to your web page depending on the range of colors that the user's device can display.
color-index To check how many colors a device can display.
device-aspect-ratio To check the aspect ratio between the width and height of an output device.
This media feature is obsolete and rarely used. Instead, use the aspect-ratio media feature.
device-height To check height of the output device's display area.
This media feature is obsolete and rarely used. Instead, use the height media feature.
device-width To check width of the output device's display area.
This media feature is obsolete and rarely used. Instead, use the width media feature.
display-mode To check the display mode of a web-application.
dynamic-range To check whether the user agent and output device supports the high brightness, contrast ratio, and color depth.
forced-colors To check the user has enabled a forced colors mode on their device.
grid To check if the user device or screen supports a grid layout.
height To determine the height of the viewport.
hover To determine if the user's device is able to hover over elements.
monochrome To determine the number of bits are used to represent each pixel in the monochrome frame buffer of the output device.
orientation To check whether the device's screen or page is in a portrait or landscape orientation.
overflow-block To determine how the user device handles content that goes beyond the initial container's boundaries in a vertical direction.
overflow-inline To determine how the user device handles content that goes beyond the initial container's boundaries in a horizontal direction.
pointer To check if the user has a pointing device they can use to point and click, such as a mouse or touchscreen.
prefers-color-scheme To determine whether a user prefers a website to have a light or dark mode.
prefers-contrast To check if the user wants the website to have more or less contrast.
prefers-reduced-motion To check if a user has enabled a setting on their device to reduce unnecessary moving animations.
resolution To check how many pixels are displayed per inch on a screen.
width To determine the width of the viewport.
update To check how the content look on the screen after when the user device can change the appearance of content

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.

The and operator is used to group multiple conditions together. The not operator negates a condition. The only operator is used to prevent older browsers from applying the styles.

If you don't mention a media type, all media type is used by default. However, when you use the not or only operators, you need to specify a media type.

CSS Media Queries - Combining Multiple Types or Features

The and keyword joins a media feature with either a media type or other media features to create more specific media queries.

The following example demonstrates that when the screen width is greater tahn 500px and the device is in landscape orientation, the text color changes to blue −

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>

The following example demonstrates that when the device is a screen media type, the screen width is greater than 600px and the device is in landscape orientation, the background color is changes to yellow −

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   body {
      background-color: red;
   }
   @media screen and (min-width: 600px) and (orientation: landscape) {
      body {
         background-color: yellow;
      }
   }
</style>
</head>
<body>
   <h3>Resize the browser window to see the effect.</h3>
   <p>The background color of the body element will change to yellow only for screen media type devices that have at least 600px wide and in landscape orientation.</p>
</body>
</html>

CSS Media Queries - Testing For Multiple Queries

The following example demonstrates that when the viewport height is greater than 700px and the device is a screen with portrait orientation, the text color changes to red −

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   body {
      color: green;
   }
   @media (min-height: 700px), screen and (orientation: portrait) {
      body {
         color: red;
      }
   }
</style>
</head>
<body>
   <h3>Resize the browser window to see the effect.</h3>
   <h1>Testing For Multiple Queries</h1>
</body>
</html>

CSS Media Queries - Inverting a Query's Meaning

CSS not keyword reverse the logic of a media query, so it only applies when the media query conditions are not met. It can only be used to negate entire media queries, not individual feature queries.

The following example demonstrates that the media query@media not all and (monochrome) reverses its meaning. If the device does not support a monochrome (black and white) display, the text color changes to blue otherwise the default text color is black.

<html>
<head>
<style>
   h1 {
      color: black;
   }
   @media not all and (monochrome) {
      h1 {
         color: blue;
      }
   }
</style>
</head>
<body>
   <h1>Inverting a Query's Meaning</h1>
</body>
</html>

The not keyword 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) {
   /* … */
}

CSS Media Queries - Improving Compatibility With Older Browsers

CSS media queries only keyword is used to make sure that older browsers that do not support media queries with media features to ignore the given styles. It doesn't impact modern browsers:

@media only screen and (color) {
   /* … */
}
Advertisements