我可以使用CSS内部媒体​​查询，并将它避免加载的背景图片我定义？(Can I use a medi

我工作的一个负责任的网站，每个页面都会有一个大的英雄形象，在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文件中的媒体查询，但。 没有理由将其列入inlline。

Answer 2:

不，你似乎不能内联@media标签：

请参阅本： 是否有可能把CSS @media规则内联？

Answer 3:

你可能有更好的运气了两步媒体查询，一个开始于CSS，但在jQuery的结束。 标记您的div的ID，这样的jQuery可以找到它们。 该方法在这里详细解释说： http://www.fourfront.us/blog/jquery-window-width-and-media-queries

文章来源: Can I use a media query in internal CSS, and will it avoid loading the background images I define?