CSS @media Rule

Quiz

CSS @media rule allows the targetting of specific devices and apply CSS styles to them. If the media query matches the device on which the content is being used, then the block of CSS will apply to the document. We can use the CSSMediaRule CSS object model interface in JavaScript to access the CSS rules that are generated using the @media media query.

Syntax

@media [media-type] ([media-feature]) {
   /* CSS Styles */
}

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.

Value	Description
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.

To learn more about media types and see examples, view the Media Types.

Media Features

Media feature apply different styles to the webpage based on the a specific characteristic, output device, or environment. Every media feature expression needs to have parenthesis around it.

To learn more about media features and see examples, view the Media Features.

Logical Operators

Media queries can be combined using logical operators such as not, and, only, and or and commas. The below table shows the logical operators that can be used in media queries:

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.
or	This is similar to the comma , operator. This was introduced in Media Queries Level 4.
not	It can be used to reverses the logic of a condition. The not operator only be true if 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.
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. This is similar to the or logical operator.

Examples of CSS @media Rule

The following examples show the usage of the @media rule.

@media Rule with Print and Screen

The following example demonstrates the use media queries to apply different styles to the element, when it is displayed on a screen or printed page mode.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      @media print {
         p {
            color: red;
         }
      }
      @media screen {
         p {
            color: blue;
         }
      }
      button {
         background-color: violet;
         padding: 5px;
      }
   </style>
</head>
<body>
   <h2>
      CSS @media Rule 
   </h2>
   <p>
      On the screen, the text will appear in blue.
   </p>
   <p>
      When you open the print preview, 
      the text will be displayed in red.
   </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>

@media Rule With and Logical Operators

The following example demonstrates that when the screen width is between 600px and 1000px, the paragraph elements will have blue text and a yellow background color.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      @media only screen and (min-width: 600px) and (max-width: 1100px)   {
         p {
            color: blue;
            background:  yellow
         }
      }
   </style>
</head>
<body>
   <h2>
      CSS @media Rule 
   </h2>
   <p>
      When you open page on a screen, the paragraph 
      elements will have blue text and a yellow 
      background color.
   </p>
</body>
</html>

@media Rule With Comma Logical Operators

The following example demonstrates that @media screen, print media query will apply to both screen and print media types, the text color of the element will be red for both.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      @media screen, print {
         p {
            color: red;
         }
      }
      button {
         background-color: violet;
         padding: 5px;
      }
   </style>
</head>
<body>
   <h2>
      CSS @media Rule
   </h2>
   <p>
      When you open a page on a screen or 
      printed page mode, the paragraph element 
      will have red text.
   </p>
   <p>
      Click on below button to see the 
      effect when you print the page.
   </p>

   <button onclick="printedPage()">
      Print Page
   </button>

   <script>
      function printedPage() {
         window.print();
      }
   </script>
</body>
</html>

@media Rule With Range Values

The following example demonstrates that when the height is greater than 300px, the text will be blue and background will be yellow. The text will be violet when the width is between 600px and 1000px.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      @media (height < 300px) {
         h4 {
            background-color: yellow;
            color: blue;
         }
      }
      @media (600px <= width <= 1000px) {
         h5 {
            background-color: violet;
         }
      }
   </style>
</head>
</body>
   <h2>
      CSS @media Rule 
   </h2>
   <h3>
      Resize the browser window to see the effect.
   </h3>
   <h4>
      When the height is greater than 300px, 
      the text will be blue and background will 
      be yellow.
   </h4>
   <h5>
      When the width is between 600 and 
      1000px, the text will be violet.
   </h5>
</body>
</html>

@media Rule With Responsive Navigation Menu

The following example demonstartes that the layout of the navigation bar will be displayed horizontally with pink background. When the screen size is less than 700px, the navbar appear vertically with red background.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      nav ul {
         list-style: none;
         padding: 0;
         margin: 0;
         background-color: pink;
         padding: 10px;  
      }
      nav li {
         display: inline;
         margin-right: 20px;
         color: blue;
      }
      nav a {
         text-decoration: none;
         text-align: center;
      }
      @media screen and (max-width: 700px) {
         nav ul {
            background-color: red;
         }
         nav li {
            display: block;
            margin: 10px 0;
         }
      }
   </style>
</head>
<body>
   <h2>
      CSS @media Rule 
   </h2>
   <h2>
      Resize the browser window to see the effect.
   </h2>
   <nav>
      <ul>
         <li><a href="#">
            Tutorialspoint
         </a></li>
         <li><a href="#">
            Home
         </a></li>
         <li><a href="#">
            Articles
         </a></li>
         <li><a href="#">
            About us
         </a></li>
      </ul>
   </nav>
</body>
</html>

@media Rule Responsive Column Layout

The following example demonstartes that the responsive column layout. When the screen width is less than 992px, then column layout change from four columns to two columns and the screen width is less than 500px, the column layout change where they are placed on top of each other.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .column-box {
         float: left;
         width: 25%;
         padding: 3px;
         box-sizing: border-box;
         background-color: pink;
         border: 2px solid blue;
      }
      @media screen and (max-width: 992px) {
         .column-box {
            width: 50%;
         }
      }
      @media screen and (max-width: 500px) {
         .column-box {
            width: 100%;
         }
      }
   </style>
</head>
<body>
   <h2>
      CSS @media Rule 
   </h2>
   <h2>
      Resize the browser window to see the effect.
   </h2>
   <div class="column-box">
      Box 1
   </div>
   <div class="column-box">
      Box 2
   </div>
   <div class="column-box">
      Box 3
   </div>
   <div class="column-box">
      Box 4
   </div>
</body>
</html>

@media Rule with Orientation

The following example demonstrates that orientation: landscape media feature, when the viewport is in landscape orientation, the body element will have a green background, yellow text, and the h3 element will have pink text.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-color: violet;
      }
      @media  only screen and (orientation: landscape) {
         body {
            background-color: green;
            color: yellow;
         }
         h3 {
            color: pink;
         }
      }
   </style>
</head>
<body>
   <h2>
      CSS @media Rule 
   </h2>
   <h3>
      Resize the browser window to see the effect.
   </h3>
   <p>
      when the viewport is in landscape orientation, 
      the body element will have a green background, 
      yellow text, and the h3 element will have pink 
      text.
   </p>   
</body>
</html>

Supported Browsers

Property
@media	21	9	3.5	4.0	9

css_reference.htm

Print Page