Sneha's tech blog
CSS Media Queries

CSS Media Queries

Sneha Raut's photo
Sneha Raut
·

7 min read

Table of contents

Media queries allow you to apply CSS styles depending on a device's general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width.

Media queries are used for the following:

  • To conditionally apply styles with the CSS @media and @import at-rules.

  • To target specific media for the <style>, <link>, <source>, and other HTML elements with the media= attribute.

  • To test and monitor media states using the Window.matchMedia() and MediaQueryList.addListener() methods.

Syntax Media Query

A media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators. Media queries are case-insensitive.

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

Media Types

Media types define the broad category of the device for which the media query applies: all, print, and screen. The type is optional (assumed to be all) except when using the not or only logical operators.

@media screen {
  /* Styles */
}

But screens aren’t the only type of media we can target. We have a few, including:

  • all: Matches all devices
  • print: Matches documents viewed in a print preview or any media that breaks the content into pages intended to print.
  • screen: Matches devices with a screen
  • speech: Matches devices that read the content audibly, such as a screen reader. This replaces the now deprecated aural type since Media Queries Level 4.

Media Features

Once we define the type of media we’re trying to match, we can start defining what features we are trying to match it to. Media feature expressions test for their presence or value and are entirely optional. Each media feature expression must be surrounded by parentheses.

Viewport / Page Features

  • width: Defines the widths of the viewport. This can be a specific number (e.g. 400px) or a range (using min-width and max-width). value - <length>
  • height: Defines the height of the viewport. This can be a specific number (e.g. 400px) or a range (using min-height and max-height). value - <length>
  • aspect-ratio: Defines the width-to-height aspect ratio of the viewport, value -<ratio>
  • orientation: The way the screen is oriented, such as tall (portrait) or wide (landscape) based on how the device is rotated. value - portrait landscape
  • overflow-block: Checks how the device treats content that overflows the viewport in the block direction, which can be scroll (allows scrolling), optional-paged (allows scrolling and manual page breaks), paged (broken up into pages), and none (not displayed). value - scroll optional-paged paged
  • overflow-inline: Checks if the content that overflows the viewport along the inline axis be scrolled, which is either none (no scrolling) or scroll (allows scrolling), value - scroll none

Display Quality

  • resolution: Defines the target pixel density of the device, values - <resolution> infinite
  • scan: Defines the scanning process of the device, which is the way the device paints an image onto the screen (where interlace draws odd and even lines alternately, and progressive draws them all in sequence), values - interlace progressive
  • grid: Determines if the device uses a grid (1) or bitmap (0) screen, values-0 = Bitmap 1 = Grid
  • update: Checks how frequently the device can modify the appearance of content (if it can at all), with values including none, slow and fast. values - slow fast none
  • environment-blending: A method for determining the external environment of a device, such as dim or excessively bright places. values - opaque additive subtractive
  • display-mode: Tests the display mode of a device, including fullscreen(no browsers chrome), standalone (a standalone application), minimal-ui (a standalone application, but with some navigation), and browser (a more traditional browser window), values-fullscreen standalone minimal-ui browser

Color

  • color: Defines the color support of a device, expressed numerically as bits. So, a value of 12 would be the equivalent of a device that supports 12-bit color, and a value of zero indicates no color support. value- <integer>
  • color-index: Defines the number of values the device supports. This can be a specific number (e.g. 10000) or a range (e.g. min-color-index: 10000, max-color-index: 15000), just like width.
  • monochrome: The number of bits per pixel that a device’s monochrome supports, where zero is no monochrome support.
  • color-gamut: Defines the range of colors supported by the browser and device, which could be srgb, p3, or rec2020.
  • dynamic-range: The combination of how much brightness, color depth, and contrast ratio is supported by the video plane of the browser and user device. values - standard high
  • inverted-colors: Checks if the browser or operating system is set to invert colors (which can be useful for optimizing accessibility for sight impairments involving color), values - inverted none.

Interaction

  • pointer: Sort of like any pointer but checks if the primary input mechanism is a pointer and, if so, how accurate it is (where coarse is less accurate, fine is more accurate, and none is no pointer). values -coarse fine none.
  • hover: Sort of like any-hover but checks if the primary input mechanism (e.g. mouse of touch) allows the user to hover over elements. value - hover
  • any-pointer: Checks if the device uses a pointer, such as a mouse or styles, as well as how accurate it is (where coarse is less accurate and fine is more accurate). values - coarse fine
  • any-hover: Checks if the device is capable of hovering elements, like with a mouse or stylus. In some rare cases, touch devices are capable of hovering.

Video Prefixed

The spec references user agents, including TVs, that render video and graphics in two separate planes that each have their own characteristics. The following features describe those planes.

  • video-color-gamut: Describes the approximate range of colors supported by the video plane of the browser and user device. values - srgb p3 rec2020
  • video-dynamic-range: The combination of how much brightness, color depth, and contrast ratio is supported by the video plane of the browser and user device. values - standard high
  • video-width¹: The width of the video plane area of the targeted display.
  • video-height¹: The height of the video plane area of the targeted display.
  • video-resolution¹: The resolution of the video plane area of the targeted display. values -<resolution> inifinite.

Scripting

  • scripting: Checks, whether the device allows scripting (i.e. JavaScript) where enabled, allows scripting, initial-only enabled.

Logical Operators

Media queries support logical operators like many programming languages so that we can match media types based on certain conditions. The @media rule is itself a logical operator that is basically stating that “if” the following types and features are matches, then do some stuff.

and

But we can use the and operator if we want to target screens within a range of widths:

/* Matches screen between 320px AND 768px */
@media screen (min-width: 320px) and (max-width: 768px) {
  .element {
    /* Styles*/
  }
}

or (or comma-separated)

We can also comma-separate features as a way of using an or operator to match different ones:

/* 
  Matches screens where either the user prefers dark mode or the screen is at least 1200px wide */
@media screen (prefers-color-scheme: dark), (min-width 1200px) {
  .element {
    /* Styles */
  }
}

not

Perhaps we want to target devices by what they do not support or match. This declaration removes the body’s background color when the device is a printer and can only show one color.

@media print and ( not(color) ) {
  body {
    background-color: none;
  }
}

Add a Breakpoint

We can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint.

Always Design for Mobile First, Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices). This means that we must make some changes in our CSS.

Instead of changing styles when the width gets smaller than 768px, we should change the design when the width gets larger than 768px. This will make our design Mobile First:

Example

https://codepen.io/Sneha_Raut/pen/KKerRXY
ineuronmedia queriesCSSWeb Developmentiwritecode