html - 我可以在内部 CSS 中使用媒体查询吗，它会避免加载我定义的背景图像吗？

Question

我正在开发一个响应式网站，其中每个页面都有一个大的主图，在 CMS 中定义。我想避免在手机上下载该背景图片。

我能想到的唯一方法是在页面头部添加一些内联 CSS，如下所示:

<style type="text/css">
    @media only screen and (min-width: 680px) {
        .hero-image { background-image: url(../images/image.jpg); }
    }
</style>

首先，我可以在内联 CSS 中使用媒体查询吗？

其次，这样会不会避免在手机上下载图片？

第三，有没有更好的办法？

谢谢

Answer 1

是的，您可以在 <style> 中使用媒体查询标签。图像仅在 CSS 要求时才加载，因此如果没有匹配选择器的内容，它就不会加载图像。

不过，将媒体查询包含在外部 CSS 文件中可能会更好。没有理由将它包含在内。