我可以在内部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文件中可能会更好.没有理由将它包括在内.

Answer 2

不，看来您不能内联@media标签：

请参考以下内容： 是否可以将CSS @media规则内联？