CSS screen Media Type

What You’ll Learn

The screen media type targets on-screen displays. It is the default for web browsers and the foundation of every responsive layout you build with media queries.

Introduction

When you open a website on your phone or laptop, the browser renders it on a screen — a continuous, scrollable display. CSS media queries let you target that medium specifically with @media screen.

Most responsive CSS you write already applies to screens. Adding the screen keyword makes that intent explicit and helps separate on-screen styles from print or other output types.

Definition and Usage

Write @media screen and (max-width: 600px) to apply rules only on screens 600 pixels wide or narrower. Combine with any media feature: min-width, orientation, resolution, and more.

📝 Syntax

Use screen as the media type, then add features with and:

/* All screen devices */
@media screen {
  /* On-screen styles */
}

/* Screens 600px wide or narrower */
@media screen and (max-width: 600px) {
  /* Mobile screen styles */
}

/* Wide screens (desktop) */
@media screen and (min-width: 48rem) {
  /* Desktop screen styles */
}

Common Media Types

Features You Can Combine

• min-width / max-width — Viewport width breakpoints for responsive layout.
• orientation — Portrait or landscape screen orientation.
• resolution — Screen pixel density (Retina, high-DPI).
• pointer / hover — Input capabilities on screen devices.

screen vs print

screen vs omitting screen

Basic Example

body {
  background-color: #dbeafe;
}

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

Default Value

There is no default media query. However, browsers treat normal stylesheets as screen media by default. Rules outside any @media block already apply to on-screen display.

Syntax Rules

• Combine type and feature with and: @media screen and (min-width: 48rem).
• Use commas for OR logic: @media screen and (max-width: 600px), print { }.
• Do not call screen a CSS property — it is a media type.
• Prefer rem or em for breakpoints when possible; px is fine for learning.
• Pair screen rules with print rules when content appears in both mediums.

Related Topics

• print — printed output media type
• height — viewport height media feature
• orientation — portrait and landscape queries

When to Use screen

Reach for the screen media type when you need to distinguish on-screen styles from other output:

• Responsive layouts — Combine with min-width / max-width breakpoints.
• Screen-only UI — Navigation bars, modals, and tooltips that should not print.
• Screen + print sites — Explicitly separate screen colors from print-friendly black-and-white.
• Orientation layouts — screen and (orientation: landscape) for tablets and phones.
• Documentation clarity — Make intent obvious in code reviews and team style guides.

Examples Gallery

Practice screen with responsive backgrounds, desktop padding, landscape layout, and screen-only banners.

body {
  background-color: #dbeafe;
}

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

.content {
  padding: 1rem;
  font-size: 1rem;
}

@media screen and (min-width: 48rem) {
  .content {
    padding: 2rem;
    font-size: 1.125rem;
  }
}

.layout {
  display: grid;
  gap: 0.75rem;
}

@media screen and (orientation: landscape) {
  .layout {
    grid-template-columns: 1fr 1fr;
  }
}

.screen-banner {
  padding: 0.75rem 1rem;
  background: #3b82f6;
  color: #fff;
}

@media print {
  .screen-banner {
    display: none;
  }
}

🛠 Usage Tips

• Mobile-first — Start with base styles, add screen and (min-width: …) for larger screens.
• Explicit with print — When you have print styles, write screen on screen-only rules for clarity.
• Use rem breakpoints — 48rem scales with user font-size preferences better than fixed pixels.
• Test by resizing — Drag the browser window to verify max-width breakpoints.
• Combine features — screen and (min-width: 48rem) and (orientation: landscape) for precise targeting.

⚠️ Common Pitfalls

• Calling it a property — screen is a media type, not a CSS property.
• Missing and — Write @media screen and (max-width: 600px), not @media screen (max-width: 600px).
• Confusing type with feature — screen is the medium; min-width is the condition.
• Only max-width — Don’t forget min-width for desktop-first enhancements.
• Forgetting print — Screen-only banners and dark backgrounds may waste ink when printed.

♿ Accessibility

• Zoom-friendly breakpoints — Use relative units so layouts adapt when users zoom text.
• Do not hide content — Responsive breakpoints should reflow content, not remove essential information.
• Touch targets on small screens — Screen mobile styles need large enough buttons and links.
• Contrast on all sizes — Color changes at breakpoints must maintain readable contrast.
• Motion preferences — Combine screen queries with prefers-reduced-motion for animations.

💡 Best Practices

Related Topics