HTML Validation

Bad value X for attribute “media” on element “link”: Deprecated media feature “min-device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

About This HTML Issue

To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.

The width media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport including the size of a rendered scroll bar (if any).

In the following example, this media query expresses that the style sheet is only linked if the width of the viewport is greater than 768px:

<link rel="stylesheet" media="only screen and (min-width: 768px)" href="styles.css">

Learn more:

Last reviewed: June 05, 2023

Was this guide helpful?

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing

Ready to validate your site?

Find Accessibility and HTML issues in your large sites, in seconds. Get your site scanned by Axe Core and W3C Validator with just one click.

Pro Trial Free Trial

Reading time

1 min read

Category

HTML Validation

Engine

W3C Validator

Last reviewed

June 05, 2023

Resources

Related W3C Validator Issues

CSS: Deprecated media feature “min-device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

Replace device-based media features like min-device-width with viewport-based features such as min-width.

The min-device-width and max-device-width media features are deprecated in Media Queries Level 5 and are flagged by validators. They target the physical device screen, which is unreliable across modern devices and zoom settings. Use min-width/max-width to respond to the layout viewport instead. This aligns with responsive design best practices and works consistently with zoom, orientation changes, and different device pixel ratios.

Common replacements:

@media (min-device-width: X) → @media (min-width: X)
@media (max-device-width: X) → @media (max-width: X)
If you were targeting pixel density, prefer resolution (e.g., min-resolution: 2dppx) or feature queries as needed.

HTML Examples

Example causing the warning

<!doctype html>
<html lang="en">
<head>
  <title>Deprecated media feature example</title>
  <style>
    /* Deprecated: targets physical device width */
    @media screen and (min-device-width: 768px) {
      .card { padding: 24px; }
    }
  </style>
</head>
<body>
  <div class="card">Content</div>
</body>
</html>

Fixed example (viewport-based)

<!doctype html>
<html lang="en">
<head>
  <title>Viewport-based media queries</title>
  <style>
    /* Recommended: targets the layout viewport width */
    @media (min-width: 768px) {
      .card { padding: 24px; }
    }

    /* Optional: high-density displays */
    @media (min-width: 768px) and (min-resolution: 2dppx) {
      .card { border: 1px solid #ccc; }
    }
  </style>
</head>
<body>
  <div class="card">Content</div>
</body>
</html>

Ready to validate your sites?
Start your free trial today.

Pro Trial Free Trial