The screen media type targets on-screen presentation—monitors, laptops, tablets, and phones. Use it inside @media when styles should apply on a display, not when printing.
It is a media type (the broad output category), not a media feature. Combine it with features such as width for responsive layouts: @media screen and (max-width: 600px).
Types such as tty, tv, projection, handheld, braille, embossed, and aural are deprecated in Media Queries Level 4—do not use them. Prefer screen, print, and all plus media features.
If you omit the media type, all is implied. Write screen when you need to exclude print (or other types) clearly.
@media screen | only screen | screen and (feature) | screen, print { … }Join a type to features with and. Separate multiple types with commas (logical OR).
| Type / pattern | Description | Try it |
|---|---|---|
screen | Intended primarily for screens | Try it |
screen and (…) | Screen plus a feature (for example max-width) | Try it |
print | Paged material and print preview | Try it |
screen, print | Same rules for both screen and print | Try it |
all | Suitable for all devices (default when type is omitted) | Try it |
screenUse screen to scope display styles, then layer width or other features for breakpoints.
@media screen { … } when rules must not apply in print.@media screen and (max-width: 600px).@media print for printer-only tweaks (hide nav, adjust fonts).| Piece | Required? | Role |
|---|---|---|
@media | Yes | Wraps the media query |
screen | Optional* | Limits the block to on-screen media |
| Media feature | Optional | Width, orientation, resolution, and so on |
and / , | As needed | Combine features, or OR multiple queries |
*Required when you use only, or when you need to exclude print.
On a normal browser tab, screen matches and print does not. Open print preview to see the print styles take over. Recheck reports matchMedia results.
Each snippet focuses on the screen media type. Use Try It Yourself for a live editor.
@media screenApply styles only when the output is a screen.
p {
background: #e2e8f0;
}
@media screen {
p {
background: #dbeafe;
}
}@media screen scopes the next rules.Combine the media type with a width feature for a simple breakpoint.
p {
background: #dbeafe;
}
@media screen and (max-width: 600px) {
p {
background: #fecaca;
}
}and. Both the type and the feature must match.(max-width: 600px) is true on narrow viewports.Give screen and print different font sizes (MDN pattern).
@media screen {
body {
font-size: 16px;
}
}
@media print {
body {
font-size: 12pt;
}
}@media blocks target different media.Small details that change how screen queries behave.
widthscreen names the medium. Responsive breakpoints still need features like width.
all@media (max-width: 600px) can apply in print too. Add screen if print should stay unaffected.
only needs a typeWrite only screen and (max-width: 600px). Do not use only without a media type.
em in breakpointsLength features work better with em when users enlarge text, so breakpoints scale with font size.
screen is a browser media type. Node.js, Deno, and Bun do not evaluate it.
Supported in all major browsers for decades. It is a foundation of responsive CSS alongside width-based features.
Bottom line: Safe for production. Use screen to separate display styles from print; pair with features for responsive layouts.
@media screen.screen and (feature) for breakpoints; print for paper.all.One line: screen names the display medium—add features for responsive behavior, and use print for paper.
Learn how to detect JavaScript availability with a media feature.
8 people found this page helpful