这是 实验性技术
检查 浏览器兼容性表格 要小心谨慎在生产中使用这之前。

草案
此页面不完整。

注意: This feature is not supported by any user agent and its specifics are subject to change.

prefers-reduced-data CSS media feature is used to detect if the user has requested the web content that consumes less internet traffic.

句法

no-preference

Indicates that the user has made no preference known to the system. This keyword value evaluates as false in the boolean context.

reduce

Indicates that user has expressed the preference for lightweight alternate content.

User preferences

Currently no user agent implements this feature, although various operating systems do support such preferences and if this media query is ever implemented user agents will likely rely on the settings provided by the operating system.

范例

注意: No browser currently implements this feature so the following example will not work.

In this example the montserrat-regular.woff2 font file will neither be preloaded nor downloaded if the user prefers reduced data, in this case the " system font stack " will serve as the fallback font:

HTML

<head>
  <link rel="preload" href="fonts/montserrat-regular.woff2" as="font" media="(prefers-reduced-data: no-preference)" crossorigin>
  <link rel="stylesheet" href="style.css">
</head>
					

CSS

@media (prefers-reduced-data: no-preference) {
    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        /* latin */
        src: local('Montserrat Regular'), local('Montserrat-Regular'), url('fonts/montserrat-regular.woff2') format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
}
body {
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Microsoft YaHei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
					

结果

规范

规范 状态 注释
Media Queries Level 5
The definition of 'reduced-data' in that specification.
编者草案 初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
prefers-reduced-data media feature Experimental Chrome 完整支持 85 注意事项 Disabled
完整支持 85 注意事项 Disabled
注意事项 bug 1051189 .
Disabled ). To change preferences in Chrome, visit
Edge 完整支持 85 注意事项 Disabled
完整支持 85 注意事项 Disabled
注意事项 bug 1051189 .
Disabled From version 85: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to Enabled ).
Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No 注意事项
不支持 No 注意事项
注意事项 bug 1051189 .
Chrome Android 完整支持 85 注意事项 Disabled
完整支持 85 注意事项 Disabled
注意事项 bug 1051189 .
Disabled ). To change preferences in Chrome, visit
Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No

图例

完整支持

完整支持

不支持

不支持

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

见实现注意事项。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

元数据

  • 最后修改:
  1. CSS
  2. CSS 参考
  3. CSS Conditional Rules
  4. Media Queries
  5. 指南
    1. Using feature queries
    2. Testing media queries programmatically
    3. Using Media Queries for Accessibility
    4. Using media queries
  6. At-Rules
    1. @document
    2. @import
    3. @media
    4. @supports

Copyright  © 2014-2026 乐数软件    

工业和信息化部: 粤ICP备14079481号-1