1. Web
  2. CSS
  3. @media
  4. prefers-reduced-data

prefers-reduced-data

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

实验性： 这是一项实验性技术
在生产中使用此技术之前，请仔细检查浏览器兼容性表格。

注意：此特性未被任何用户代理支持，其具体细节可能会发生变化。

prefers-reduced-data CSS 媒体特性用于检测用户是否请求了消耗更少互联网流量的网页内容。

语法

no-preference

表示用户未向系统表明任何偏好。此关键字值在布尔上下文中评估为假。

reduce

表示用户已表达了对轻量级替代内容的偏好。

用户偏好

目前没有用户代理实现此特性，尽管各种操作系统确实支持此类偏好，并且如果此媒体查询将来得以实现，用户代理可能会依赖于操作系统提供的设置。

示例

注意：目前没有任何浏览器实现此特性，因此以下示例将不起作用。

在此示例中，如果用户偏好减少数据，则不会预加载或下载 montserrat-regular.woff2 字体文件，在这种情况下，“系统字体堆栈”将作为备用字体。

HTML

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

css
@media (prefers-reduced-data: no-preference) {
  @font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: normal;
    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",
    sans-serif;
}

规范

规范
媒体查询 Level 5
# prefers-reduced-data

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由MDN 贡献者在修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.