Media queries can target a device's screen dimensions using width and height features, most commonly width, to apply different styles based on the available viewport size.

Syntax

@media (min-width: value) { ... }
@media (max-width: value) { ... }

Deep Dive Course

width, and its min-width/max-width variants, refers specifically to the browser's viewport width, the visible browsing area, not the physical screen's total resolution, which is why the exact same media query behaves identically whether a user is on a small physical phone screen or has simply resized a desktop browser window down to that same narrow width. height and its min-height/max-height variants work identically but target the viewport's vertical dimension instead, which is used less frequently in typical responsive design, since horizontal width is usually the more relevant constraint for reflowing a page's layout.

1Understanding Screen Dimensions

💡

width in a media query always refers to the browser's viewport width, not the physical device's actual screen resolution — a narrow desktop browser window and a small phone screen at the exact same viewport width trigger the identical set of width-based media query styles.

editor.html

@media (max-width: 480px) {
  .container {
    padding: 10px;
  }
}

localhost:3000

2Practical Example

Here is a real-world application of Screen Dimensions showing how it is used in production CSS code.

editor.html

@media (min-height: 800px) {
  .hero {
    min-height: 600px;
  }
}

localhost:3000

3Best Practices

Follow these guidelines when working with Screen Dimensions:

1. Base responsive breakpoints on min-width/max-width viewport width, the far more commonly relevant dimension for reflowing layout, rather than height in most typical designs

2. Remember width-based media queries respond to the actual current browser viewport size, including a resized desktop window, not just a device's fixed physical screen resolution

3. Choose breakpoint values based on where your own specific content and layout actually needs to change, rather than blindly targeting specific named devices' exact screen widths

⚠️

Tip: width in a media query always refers to the browser's viewport width, not the physical device's actual screen resolution — a narrow desktop browser window and a small phone screen at the exact same viewport width trigger the identical set of width-based media query styles.

editor.html

@media (max-width: 480px) {
  .container {
    padding: 10px;
  }
}

localhost:3000

Examples

Example 01Basic Usage

@media (max-width: 480px) {
  .container {
    padding: 10px;
  }
}

Example 02Advanced Example

@media (min-height: 800px) {
  .hero {
    min-height: 600px;
  }
}

Best Practices

Base responsive breakpoints on min-width/max-width viewport width, the far more commonly relevant dimension for reflowing layout, rather than height in most typical designs
Remember width-based media queries respond to the actual current browser viewport size, including a resized desktop window, not just a device's fixed physical screen resolution
Choose breakpoint values based on where your own specific content and layout actually needs to change, rather than blindly targeting specific named devices' exact screen widths

Interview Question

Why does a width-based media query respond identically to a narrow desktop browser window and a small phone with the same viewport width, even though the two devices have very different physical screen sizes and resolutions?▼

Hint: Think about exactly what 'width' in a media query is actually measuring — the browser's current viewport, or the device's fixed, underlying physical screen hardware.

The width feature in a media query specifically measures the browser's current viewport width, the actual visible browsing area currently available to render content within, which is a property of the browser window's current state, not a fixed, permanent characteristic of the underlying physical device or its screen hardware. A desktop browser window resized down to exactly 375px wide presents that exact same 375px viewport width to the media query system as a phone whose physical screen, and default browser viewport, also happens to be 375px wide, and since the media query is only ever evaluating this one specific viewport-width value, it has no way to know, or care, whether that 375px figure comes from a genuinely small physical device or from an arbitrarily resized window on a much larger desktop monitor. This is precisely why testing responsive designs by simply resizing a desktop browser window remains such a genuinely valid, reliable way to preview how a layout will behave at various screen widths, without necessarily needing to test on numerous different physical devices for width-based breakpoints specifically.

Exercises

MediumPractice using Screen Dimensions in a real scenario.

View Solution

@media (max-width: 480px) {
  .container {
    padding: 10px;
  }
}

Frequently Asked Questions

Related Functions

Media-queriesOrientationRefDimensions