此页面由 Cloud Translation API 翻译。

使用媒体查询优化 CSS 背景图片

Demián Renzulli

许多网站会请求大量资源（例如图片），而这些资源并未针对特定屏幕进行优化，并且会发送包含一些设备永远不会使用的样式的大型 CSS 文件。媒体查询是一种向不同屏幕提供量身定制的样式表和资源的一种常用技术，可减少向用户传输的数据量并提高网页加载性能。本指南介绍了如何使用媒体查询发送仅与实际需要一样大的图片，这项技术通常称为自适应图片。

前提条件

本指南假定您熟悉 Chrome 开发者工具。如果您愿意，可以改用其他浏览器的开发者工具。您只需将本指南中的 Chrome 开发者工具屏幕截图映射回所选浏览器中的相关功能即可。

了解自适应背景图片

首先，分析未优化演示的网络流量：

在新的 Chrome 标签页中打开未经优化的演示。
按 `Control+Shift+J`（在 Mac 上，则按 `Command+Option+J`）打开开发者工具。
点击网络标签页。
重新加载页面。

您会发现，所请求的唯一图片是 background-desktop.jpg，大小为 1006KB：

调整浏览器窗口的大小，并注意网络日志未显示该网页发出的任何新请求。这意味着所有屏幕尺寸都会使用相同的图片背景。

您可以在 style.css 中查看控制背景图片的样式：

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}

以下是所用每个属性的含义：

background-position: center center：将图片垂直和水平居中。
background-repeat: no-repeat：仅显示图片一次。
background-attachment: fixed：避免使背景图片滚动。
background-size: cover：调整图片大小以覆盖整个容器。
background-image: url(images/background-desktop.jpg)：图片的网址。

组合在一起时，这些样式会指示浏览器根据不同的屏幕高度和宽度调整背景图片。这是实现自适应背景的第一步。

为所有屏幕尺寸使用单张背景图片存在一些限制：

无论屏幕大小如何，发送的字节数都是相同的，即使对手机等某些设备而言，较小、较轻量的图片背景也能达到同样的效果。一般而言，您需要发送在用户屏幕上仍能正常显示的最小图片，以便提升性能并节省用户数据。
在较小的设备上，系统会拉伸或裁剪图片以覆盖整个屏幕，从而可能对用户隐藏背景的相关部分。

在下一部分中，您将了解如何应用优化，以根据用户的设备加载不同的背景图片。

使用媒体查询

使用媒体查询是声明仅适用于特定媒体或设备类型的样式表的一种常见方法。它们是使用 @media 规则实现的，您可以利用规则定义一组断点，而这些断点用于定义特定的样式。当满足 @media 规则定义的条件（例如，特定的屏幕宽度）时，将应用断点内定义的一组样式。

您可以通过以下步骤对网站应用媒体查询，以便根据请求网页的设备的最大宽度来使用不同的图片。

在 style.css 中，移除包含背景图片网址的行：

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}

接下来，根据移动设备、平板电脑和桌面设备屏幕通常具有的常见尺寸（以像素为单位），针对每种屏幕宽度创建一个断点：

对于移动设备：

@media (max-width: 480px) {
    body {
        background-image: url(images/background-mobile.jpg);
    }
}

对于平板电脑：

@media (min-width: 481px) and (max-width: 1024px) {
    body {
        background-image: url(images/background-tablet.jpg);
    }
}

对于桌面设备：

@media (min-width: 1025px) {
    body {
        background-image: url(images/background-desktop.jpg);
   }
}

在浏览器中打开优化版 style.css，查看所做的更改。

针对不同的设备进行衡量

接下来，以不同的屏幕尺寸和模拟移动设备直观呈现所生成的网站：

在新的 Chrome 标签页中打开经过优化的网站。
缩小视口（小于 480px）。
按 `Control+Shift+J`（在 Mac 上，则按 `Command+Option+J`）打开开发者工具。
点击网络标签页。
重新加载页面。请注意 background-mobile.jpg 映像的请求方式。
加宽视口。当宽度超过 480px 时，请注意如何请求 background-tablet.jpg。当宽度超过 1025px 时，请注意如何请求 background-desktop.jpg。

当浏览器屏幕的宽度发生变化时，请求新的图片。

尤其是当宽度小于移动断点中定义的值 (480px) 时，您会看到以下网络日志：

与桌面设备背景相比，新的移动设备背景小 67%。

对 Largest Contentful Paint (LCP) 的影响

系统认为包含 CSS 背景图片的元素是 Largest Contentful Paint (LCP) 的候选对象，但浏览器预加载扫描程序找不到 CSS 背景图片，这意味着如果您不够谨慎，可能会延迟网站的 LCP。

您应考虑的第一个选项是，您的 LCP 候选图片是否可以在具有 srcset 和 sizes 属性的 <img> 元素中使用，以确保响应速度。浏览器预加载扫描程序会发现 <img> 元素，并在解析器被渲染时阻止对这些元素发送请求。

如果您无法（或不想）避免使用 CSS 背景图片，第二种方法是预加载自适应图片，以确保预加载适合视口尺寸的正确图片。<link> 元素 media、imagesrcset 和 imagesizes 会提示浏览器，给定的资源提示仅适用于特定视口条件，从而避免了在你只想加载一个适合当前视口的资源时重复进行多次预加载。

摘要

在本指南中，您学习了如何应用媒体查询来请求针对特定屏幕尺寸量身定制的背景图片，以及如何在较小的设备（如手机）上访问网站时节省字节空间。您已使用 @media 规则实现了自适应背景。所有浏览器都广泛支持此方法。新的 CSS 功能 image-set() 可用于实现相同的目的，而且代码行数更少。在撰写本文时，并非所有浏览器都支持此功能，但您可能需要密切关注采用情况的演变，因为它可以代表这种技术的有趣替代方案。