Selector at-rule @media

Sets the style rules for different media
types/devices/sizes

With it, you specify a media query and a block of
CSS to apply to the document if and only if the
media query matches the device on which the
content is being used.

Syntax

/* At the top level of your code */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* Nested within another conditional at-rule */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

Media types

• all
• print
• screen

Media features

• any-hover
• any-pointer
• aspect-ratio
• color
• color-gamur
• color-index
• display-mode
• forced-colors
• grid
• height
• hover
• inverted-colors
• monochrome
• orientation
• overflow-block
• overflow-inline
• pointer
• prefers-color-scheme
• prefers-contrast
• prefers-reduced-motion
• resolution
• scan
• scripting
• update
• video-dynamic-range
• width

Logical operators

• and
• not
• only
• ,
• or

Source MDN

Example

// Introduced in Media Queries Level 4 is a new 
// range syntax that allows for less verbose 
// media queries
@media (height > 600px) {
  body {
    line-height: 1.4;
  }
}

@media (400px <= width <= 700px) {
  body {
    line-height: 1.4;
  }
}

@media print {
  body {
    font-size: 10pt;
  }
}

@media screen {
  body {
    font-size: 13px;
  }
}

@media screen, print {
  body {
    line-height: 1.2;
  }
}

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}