许多站点请求大量资源,例如图像,这些资源并未针对某些屏幕进行优化,并发送包含某些设备永远不会使用的样式的大型 CSS 文件。使用媒体查询是一种流行的技术,用于将定制的样式表和资产交付到不同的屏幕,以减少传输给用户的数据量并提高页面加载性能。本指南将向您展示如何使用媒体查询发送所需大小的图像,这种技术通常称为响应式图像。
先决条件
本指南假设您熟悉Chrome DevToolshttps://developers.google.com/web/tools/chrome-devtools。如果您愿意,可以改用其他浏览器的 DevTools。您只需将本指南