我正在一个敏感网站上工作，每个
页面都将有一个大的英雄图像，在CMS中定义。我想避免在手机上下载该背景
图片。
我可以想到的唯一方法是在页面的顶部有一些内联CSS，如下所示：
<style type="text/css">
@media only screen and (min-width: 680px) {
.hero-image { background-image: url(../images/image.jpg); }
}
</style>
首先，我可以在内联CSS中使用媒体查询吗？
第二，这样做可以避免在手机上下载图像吗？
第三，有没有更好的方法？
谢谢
是的，您可以在< style>
标签。如果CSS需要它，图像才被加载，所以如果与选择器不匹配，那么它不会打扰加载图像。
不过，将外部CSS文件中的媒体查询包含起来可能会更好。没有理由把它包括在内。
原文链接：https://www.f2er.com/html5/168918.html
