CSS width Media Feature

What You’ll Learn

The width media feature targets the viewport’s horizontal size. Build responsive layouts for phones, tablets, and desktops with min-width and max-width queries.

Introduction

Responsive web design starts with width. The width media feature lets you apply CSS when the browser window is wide or narrow — the foundation of mobile-first layouts, breakpoint systems, and adaptive grids.

A phone in portrait mode has a narrow viewport; a desktop monitor has a wide one. By querying viewport width with min-width and max-width, you control when columns stack, when navigation collapses, and when typography scales up.

Definition and Usage

Write @media (min-width: 600px) or @media (max-width: 768px) to apply styles when the viewport meets your width condition. Values use length units such as px, em, rem, or viewport units like vw.

📝 Syntax

Use min-width, max-width, or an exact width inside @media:

/* Viewport is at least 600px wide */
@media (min-width: 600px) {
  /* Styles for wide viewports */
}

/* Viewport is at most 768px wide */
@media (max-width: 768px) {
  /* Styles for narrow viewports */
}

/* Exact viewport width (rare) */
@media (width: 1024px) {
  /* Matches only at exactly 1024px width */
}

Feature Variants

• min-width — Matches when viewport width is greater than or equal to the value (wide screens).
• max-width — Matches when viewport width is less than or equal to the value (narrow screens).
• width — Matches an exact viewport width; rarely used because few users hit one precise pixel width.

width Media Feature vs width Property

width vs height Media Features

Basic Example

body {
  font-size: 0.875rem;
}

@media (min-width: 600px) {
  body {
    font-size: 1rem;
  }
}

@media (max-width: 400px) {
  body {
    font-size: 0.8125rem;
  }
}

Default Value

There is no CSS default. You choose the threshold based on your layout needs. Prefer rem breakpoints for scalable, accessible designs.

Syntax Rules

• Use length values: px, em, rem, vw.
• Combine with height: @media (min-width: 48rem) and (min-height: 32rem).
• max-width overrides min-width when both match — order matters in CSS cascade.
• Resize the browser horizontally to test; DevTools device mode supports width emulation.
• Mobile-first: start with base styles, then add min-width rules for larger screens.

Related Topics

• width property — set element width
• height — viewport height queries
• aspect-ratio — width-to-height ratio queries

When to Use width

Reach for width-based media queries when horizontal space drives the design:

• Mobile layouts — Stack columns and hide sidebars with max-width.
• Desktop upgrades — Enable multi-column grids on wide screens with min-width.
• Typography scaling — Increase font size when the viewport is wide enough to read comfortably.
• Navigation patterns — Show hamburger menus on narrow viewports, full nav on wide ones.
• Tablet-only styles — Combine min-width and max-width for a specific range.

Examples Gallery

Practice the width media feature with font scaling, background changes, grid layouts, and tablet-only ranges.

body {
  font-size: 0.875rem;
  line-height: 1.5;
}

@media (min-width: 768px) {
  body {
    font-size: 1.125rem;
  }
}

body {
  background-color: #ffffff;
}

@media (max-width: 600px) {
  body {
    background-color: #f1f5f9;
  }
}

.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.sidebar {
  display: none;
}

@media (min-width: 600px) and (max-width: 1024px) {
  .sidebar {
    display: block;
    width: 200px;
    background: #f8fafc;
    padding: 1rem;
  }
}

💬 Usage Tips

• Mobile-first — Write base styles for narrow viewports, then add min-width upgrades.
• Use rem breakpoints — min-width: 48rem scales with user font settings.
• Test real devices — Emulators help, but physical phones reveal touch and scroll issues.
• Avoid too many breakpoints — Three or four well-chosen widths beat a dozen arbitrary ones.
• Pair with container queries — Width media features query the viewport; container queries target individual components.

⚠️ Common Pitfalls

• Confusing with width property — Media feature checks viewport; property sizes elements.
• Desktop-first max-width chains — Overlapping max-width rules are harder to maintain than mobile-first min-width.
• Exact width matches — (width: 1024px) rarely matches real users.
• Ignoring cascade order — Later rules win when min and max both match.
• Fixed px everywhere — Prefer rem breakpoints for accessibility.

♿ Accessibility

• Zoom and text size — Large text can trigger layout shifts; test at 200% zoom.
• Touch targets — Narrow viewports need adequately sized buttons and links.
• Content reflow — Ensure text reflows without horizontal scrolling at 320px width.
• Focus visibility — Collapsed navigation must keep visible focus outlines.
• Reduced motion — Layout changes should respect prefers-reduced-motion.

💡 Best Practices