CSS Media Queries

❮ Previous Next ❯

CSS2 Introduced Media Types

The @media rule, which came into CSS2, allowed us to create distinct style rules for various types of media.

Examples: You can create different sets of style instructions for various devices like computers, printers, handheld gadgets, televisions, and more.

Regrettably, these types of media formats didn't receive much support from devices, except for the print media format.

CSS3 Introduced Media Queries

CSS3's media queries expanded on the concept of media types from CSS2. Instead of focusing on the type of device, they consider what the device can do.

Media queries are a way to examine various aspects, like:

width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution

Media queries are commonly used to provide a customized style sheet for different devices like desktops, laptops, tablets, and mobile phones, including iPhones and Android phones.

Media Query Syntax

A media query is made up of a type of media and can have one or more conditions that can be either true or false.

@media not|only mediatype and (expressions) {
CSS-Code;
}

The query's outcome is "true" when the chosen media type matches the device the document appears on, and all conditions in the media query are also "true." If a media query is "true," it means that the corresponding style sheet or style rules will be used, following the usual cascading rules.

If you don't use the 'not' or 'only' operators, you don't have to specify the media type, and it will automatically be set to 'all'.

You can use separate stylesheets for various types of screens or devices:

CSS3 Media Types

Value	Description
all	This code is designed to work with all types of devices.
print	Used for printers
screen	This is for computer screens, tablets, and smartphones, among other devices.
speech	This is for screen readers, which are tools that read web pages aloud.

Media Queries Simple Examples

You can use media queries by adding another section of CSS code directly within your stylesheet.

In this example, when the screen is 480 pixels wide or wider, the background color becomes light green. If the screen is less than 480 pixels wide, the background color turns pink.

Example

@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}

Try it Yourself »

In this example, there's a menu that moves to the left side of the page if the screen is 480 pixels wide or wider. If the screen is less than 480 pixels wide, the menu will be on top of the content.

Example

@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}

Try it Yourself »

More Media Query Examples

For much more examples on media queries, go to the next page: CSS MQ Examples.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: pink;
      }

      @media screen and (min-width: 480px) {
        body {
          background-color: lightgreen;
        }
      }
    </style>
  </head>
  <body>
    <h1>Resize the browser window to see the effect!</h1>
    <p>The media query works when the device is a screen and the screen width is at least 480 pixels.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      .wrapper {
        overflow: auto;
      }

      #main {
        margin-left: 4px;
      }

      #leftsidebar {
        float: none;
        width: auto;
      }

      #menulist {
        margin: 0;
        padding: 0;
      }

      .menuitem {
        background: #CDF0F6;
        border: 1px solid #d4d4d4;
        border-radius: 4px;
        list-style-type: none;
        margin: 4px;
        padding: 2px;
      }

      @media screen and (min-width: 480px) {
        #leftsidebar {
          width: 200px;
          float: left;
        }

        #main {
          margin-left: 216px;
        }
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div id="leftsidebar">
        <ul id="menulist">
          <li class="menuitem">Menu-item 1</li>
          <li class="menuitem">Menu-item 2</li>
          <li class="menuitem">Menu-item 3</li>
          <li class="menuitem">Menu-item 4</li>
          <li class="menuitem">Menu-item 5</li>
        </ul>
      </div>
      <div id="main">
        <h1>Resize the browser window to see the effect!</h1>
        <p> This example demonstrates a menu that moves to the left side of the page if the screen is 480 pixels wide or wider. If the screen is smaller than 480 pixels, the menu will be placed above the content.</p>
      </div>
    </div>
  </body>
</html>

❮ Previous Next ❯

CSS Basics

CSS Properties

CSS Responsive

CSS Grid

CSS Media Queries

CSS2 Introduced Media Types

CSS3 Introduced Media Queries

Media Query Syntax

CSS3 Media Types

Media Queries Simple Examples

Example

Example

More Media Query Examples

Web Development