CSS @media

CSS @media at-rule allow you to target 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.

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.

CSS @media - 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 −

<html>
<head>
<style>
   @media print {
      p {
         color: red;
      }
   }
   @media screen {
      p {
         color: blue;
      }
   }
   button {
      background-color: violet;
      padding: 5px;
   }
</style>
</head>
<body>
   <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>

CSS @media 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 −

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

CSS @media 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 −

<html>
<head>
<style>
   @media screen, print {
      p {
         color: red;
      }
   }
   button {
      background-color: violet;
      padding: 5px;
   }
</style>
</head>
<body>
   <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>

CSS @media 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 −

<html>
<head>
<style>
   @media (height < 300px) {
      h4 {
         background-color: yellow;
         color: blue;
      }
   }
   @media (600px <= width <= 1000px) {
      h5 {
         background-color: violet;
      }
   }
</style>
</head>
   <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>

CSS @media 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 −

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

CSS @media 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 −

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

CSS @media Responsive Column Website

The following example demonstartes that the responsive column layout. When the screen width is greater than 450px, the column layout change where they are placed on top of each other −

<html>
<head>
<style>
   .header {
      padding: 200px;
      text-align: center;
      background: #e72626;
      color: white;
   }
   .navbar {
      display: flex;
      background-color: #1abc9c;
   }
   .navbar a {
      color: white;
      padding: 14px 20px;
      text-decoration: none;
      text-align: center;
   }
   .navbar a:hover {
      background-color: #ddd;
      color: black;
   }
   .row {
      display: flex;
      flex-wrap: wrap;
   }
   .flexbox {
      flex: 70%;
      display: flex;
      background-color: #f1f1f1;
      padding: 20px;
   }
   .flexbox flexbox1,
   flexbox2 {
      flex: 35%;
   }
   .right_side {
      flex: 30%;
      background-color: white;
      padding: 20px;
   }
   .images {
      background-color: #f5ff34;
      width: 100%;
      padding: 20px;
   }
   .my-button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
   }
   .my-footer {
      padding: 20px;
      text-align: center;
      background: #ddd;
   }
   @media screen and (max-width: 450px) {
      .row,
      .flexbox,
      .navbar {
         flex-direction: column;
      }
   }
</style>
</head>
<body>
   <h4 style="text-align:center">Resize the browser window to see the effect.</h4>
   <div class="navbar">
      <a href="#">Home</a>
      <a href="#">Courses</a>
      <a href="#">Articles</a>
      <a href="#">Setting</a>
      <a href="#">About us</a>
   </div>

   <div class="header">
      <h1>Tutorialspoint</h1>
      <h4>Simple Easy Learning</h4>
   </div>

   <div class="row">
      <div class="flexbox">
         <div class="flexbox1">
            <h2>HTML</h2>
            <h5>Jan 17, 2003</h5>
            <img src="html.png" style="height:300px; width:95%">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
               the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
               type and scrambled it to make a type specimen book.</p>
            <button class="my-button">More info</button>
         </div>
         <br>
         <div class="flexbox2">
            <h2>CSS</h2>
            <h5>Sep 22, 1995</h5>
            <img src="css.png" style="height:300px; width:95%">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
               the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
               type and scrambled it to make a type specimen book.</p>
            <button class="my-button">More info</button>
         </div>
         <div class="flexbox2">
          <h2>Bootstrap</h2>
          <h5>5 Dec 22, 2011</h5>
          <img src="boot.png" style="height:300px; width:95%">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
             the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
             type and scrambled it to make a type specimen book.</p>
          <button class="my-button">More info</button>
       </div>
      </div>
      <div class="right_side">
         <h3>Articles</h3>
         <div class="images" style="height:100px;">
            <h3>HTML</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
               the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
               type and scrambled it to make a type specimen book.</p>
         </div><br>
         <div class="images" style="height:100px;">
            <h3>CSS</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and
               typesetting industry. Lorem Ipsum has been
               the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
               type and scrambled it to make a type specimen book.</p>
         </div><br>
         <div class="images" style="height:100px;">
            <h3>Bootstrap</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and
               typesetting industry. Lorem Ipsum has been
               the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
               type and scrambled it to make a type specimen book.</p>
         </div><br>
         <div class="images" style="height:100px;">
            <h3>Javascript</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and
               typesetting industry. Lorem Ipsum has been
               the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
               type and scrambled it to make a type specimen book.</p>
         </div>
         <h2>About Me</h2>
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
            industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
            and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
            leap into electronic typesetting, remaining essentially unchanged.Lorem Ipsum is simply dummy text of
            the printing and typesetting industry. Lorem Ipsum has been the
            industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
            and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
            leap into electronic typesetting, remaining essentially unchanged.Lorem Ipsum is simply dummy text of
            the printing and typesetting industry.</p>
      </div>
   </div>
   <div class="my-footer">
      <h2>© 2023 Tutorialspoint</h2>
   </div>
</body>
</html>

CSS @media - 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 −

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


   
   
   
   
   
   
   
   
   

		
	   
			Advertisements