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

发布时间：2020-11-27 09:53:03 阅读：20
许多站点请求大量资源（如图像）未针对某些屏幕进行优化，并发送包含某些设备永远不会使用的样式的大型 CSS 文件。使用媒体查询是向不同屏幕提供定制样式表和资产的一种流行技术，以减少传输给用户的数据量并提高页面加载性能。

本文将演示如何使用媒体查询发送仅与所需的图像一样大的图像，这种技术通常称为响应式图像。

先决条件

本指南假定你熟悉 Chrome 开发工具。如果你愿意，可以使用其他浏览器的 DevTools 代替。你只需将本指南中的 Chrome DevTools 屏幕截图映射到你选择的浏览器中的相关功能。

了解响应式背景图像

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

  1. 在新的 Chrome 选项卡中打开未优化的演示。
  2. 按Control+Shift+J（或 Mac上 的Command+Option+J）打开 DevTools。
  3. 单击“网络”选项卡。
  4. 重新加载页面。

你会看到唯一请求的图像是background-desktop.jpg，它的大小为 1006KB：

没有进行优化的 CSS 文件

调整浏览器窗口的大小，并注意到网络日志没有显示页面正在发出的任何新请求。这意味着对所有屏幕大小使用相同的图像背景。

你可以在 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)：图像的 URL。

合并后，这些样式会告诉浏览器将背景图像调整到不同的屏幕高度和宽度。这是实现反应迅速背景的第一步。

对于所有屏幕大小使用单个背景图像都有一些限制：

  • 发送的字节量相同，无论屏幕大小如何，即使对于某些设备（如手机），更小、更轻量级的图像背景看起来同样好。通常，你希望发送在用户屏幕上仍然看起来良好的尽可能小的图像，以提高性能并保存用户数据。
  • 在较小的设备中，图像将被拉伸或剪切以覆盖整个屏幕，从而可能将背景的相关部分隐藏给用户。

下一节将学习如何根据用户的设备应用优化来加载不同的背景图像。

使用媒体查询

使用媒体查询是声明仅适用于特定媒体或设备类型的样式表的常见技术。它们是通过使用@media规则实现的，该规则允许你定义一组断点，其中定义了特定的样式。当满足@media规则定义的条件(例如，特定的屏幕宽度)时，将应用在断点内定义的一组样式。

以下步骤可用于将媒体查询应用到站点，以便根据请求页面的设备的最大宽度使用不同的图像。

  • 在style.css中删除包含背景图像 URL 的行： 

    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);
   }
}

测试不同的设备

接下来在不同的屏幕尺寸上和模拟移动设备测试：

  • 在一个新的 Chrome 标签页中打开优化后的站点。
  • 缩小窗口（小于 480px）。
  • 按Control+Shift+J（或 Mac 上的Command+Option+J）打开 DevTools。
  • 单击 Network 选项卡。
  • 重新加载页面。请注意background-mobile.jpg图像是如何被请求的。
  • 让你的窗口更宽。当宽度超过 480px 时，请注意background-tablet.jpg是如何被请求的。当宽度超过 1025px 时，请注意background-desktop.jpg是如何被请求的。

更改浏览器屏幕的宽度时，将请求新图像。

特别是当宽度低于移动断点中定义的值（480px）时，你会看到以下网络日志:

新的移动背景的大小比桌面背景小 67%

总结

在本指南中，你学习了如何应用媒体查询来请求背景图像，这些背景图像是根据特定的屏幕大小定制的，并在移动电话等较小的设备上访问站点时节省字节。你使用了@media规则来实现一个响应式背景。所有浏览器都广泛支持这项技术。一个新的 CSS 特性：image-set()，可以使用更少的代码行来实现同样的目的。在撰写本文时，并不是所有浏览器都支持该特性，但是你可能希望关注采用该特性的发展过程，因为它可能是该技术的一种有趣的替代方法。

我们在微信上24小时期待你的声音
解答：网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章："使用媒体查询优化 CSS 背景图像"，此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助，请收藏我们的网址：https://www.91webs.cn。

18617670560