CSS Media Queries

In this section we're going to first introduce media types and media feature descriptors, then we'll explain media queries.

Media types

Used in media queries and @import declarations, media types allow us to determine on which media a CSS file, or a piece of CSS, is loaded.

We have the following media types

• all means all the media
• print used when printing
• screen used when the page is presented on a screen
• speech used for screen readers

screen is the default.

In the past we had more of them, but most are deprecated as they proven to not be an effective way of determining device needs.

We can use them in @import statements like this:

  @import :url(myfile.css) screen;
  @import :url(myfile-print.css) print;

We can load a CSS file on multiple media types separating each with a comma:

  @import :@import url(myfile.css) screen, print;;

The same works for the link tag in HTML:

<link rel="stylesheet" type="text/css" href="myFile.css" media="screen">
<link 
  rel="stylesheet" 
  type="text/css" 
  href="myFile.css" 
  media="screen, print" 
/>

We're not limited to just using media types in the media attribute and in the @import declaration. There's more

Media feature descriptors

First, let's introduce media feature descriptors. They are additional keywords that we can add to the media attribute of link or the the @import declaration, to express more conditionals over the loading of the CSS.

Here's the list of them:

• width
• height
• device-width
• device-height
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
• orientation
• scan
• grid

Each of them have a corresponding min- and max-, for example:

• min-width , max-width
• min-device-width , max-device-width

and so on.

Some of those accept a length value which can be expressed in px or rem or any length value. It's the case of width height width device-width device-height.

For example:

  @import :url(myfile.css) screen and (max-width: 800px);

Notice that we wrap each block using media feature descriptors in parentheses.

Some accept a fixed value. orientation , used to detect the device orientation, accepts portrait or landscape.

Example:

<link rel="stylesheet" type="text/css" href="myFile.css" media="screen and (max-width: 800px);">

scan , used to determine the type of screen, accepts progressive (for modern displays) or interlace (for older CRT devices)

Some others want an integer.

Like color which inspects the number of bits per color component used by the device. Very low-level, but you just need to know it's there for your usage (like grid, color-index monochrome).

aspect-ratio and device-aspect-ratioaccept a ratio value representing the width to height viewport ratio, which is expressed as a fraction.

Example:

  @import :url(myfile.css) screen and (aspect-ratio: 4/3);

resolution represents the pixel density of the device, expressed in a resolution data type like dpi.

  @import :url(myfile.css) screen and (min-resolution: 100dpi);

Logic operators

We can combine rules using and:

<link rel="stylesheet" type="text/css" href="myFile.css" media="screen and (max-width: 800px);">

We can perform an "or" type of logic operation using commas, which combines multiple media queries:

  @import :url(myfile.css) screen, print;

We can use orto negate a media query:

  @import :url(myfile.css) not screen;

Media queries

All those above rules we saw applied to @import or the the link HTML tag can be applied inside the CSS, too.

You need to wrap them in a @media () {} structure.

Example:

@media screen and (max-width: 800px) {
  /* enter some CSS */
} 
  

and this is the foundation for responsive design.

Media queries can be quite complex. This example applies the CSS only if it's a screen device, the width is between 600 and 800 pixels, and the orientation is landscape:

@media screen and (max-width: 800px) and (min-width: 600px) and (orientation: landscape) {
  /* enter some CSS */
} 
  

Feature Queries

Feature queries are a recent and relatively unknown ability of CSS, but a well supported one .

We can use it to check if a feature is supported by the browser using the @supports keyword.

For example I think this is especially useful, at the time of writing, for checking if a browser supports CSS grid, for example, which can be done using:

@supports (display: grid) {
  /* enter some CSS */
} 
  

We check if the browser supports the grid value for the display property.

We can use @supports for any CSS property, to check any value.

We can also use the logical operators and, or and and notto build complex feature queries:

@supports (display: grid) and (display: flex) {
  /* enter some CSS */
} 
  

Example

<!DOCTYPE HTML>
<html>
  <head>
    <style>
    .wrapper {
      display :grid;
      flex-direction :column;
    } 
    
    header {
      width :100%;
      background-color :#fed330;
      padding :20px;
      text-align :center;
    } 
    
    main {
      width :100%;
      justify-content :space-between;
      background-color :#fff;
      padding :20px 0;
    } 
    
    article {
      width :60%;
      background-color :#20bf6b;
      padding :20px;
    } 
    
    aside {
      width :35%;
      background-color :#45aaf2;
    } 
    
    footer {
      width :100%;
      background-color :#fd9644;
      padding :20px;
      text-align :center;
    } 

    @media (max-width: 500px) {
      .wrapper {
        flex-direction :column;
    } 

      body {
        background-color :red;
    } 
  } 

    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <title>Title of the Document</title>
  </head>
  <body>
    <div class="wrapper">
    <header>Header</header>
    <main>
      <article>
        <h1>Welcome</h1>
        <p>Hi!</p>
      </article>
      <aside>
        <ul>
          <li>Siderbar</li>
        </ul>
      </aside>
    </main>
    <footer>Footer</footer>
  </div>
</body>
</html>

These are the basics example of responsive design using @media and by understanding this will help you to make a great imfact.