我可以在内部CSS中使用媒体查询，它会避免加载我定义的背景图片吗？ [英] Can I use a media query in internal CSS, and will it avoid loading the background images I define?

问题描述

我在响应式网站上工作，每个网页都有一个大型英雄形象，在CMS中定义。我想避免不得不在手机上下载背景图片。

I'm working on a responsive site where each page will have a large hero image, defined in the CMS. I'd like to avoid having to download that background image on mobiles.

我可以想到的唯一方法是在头部有一些内联CSS

The only way I can think to do it is to have some inline CSS in the head of the page like so:

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

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

First, can I use media queries in inline CSS?

第二，这会避免在手机上下载图片吗？

Second, will this avoid downloading the image on mobiles?

第三，有更好的办法吗？

Third, is there a better way?

感谢

推荐答案

是的，您可以使用< style& / code>标记。如果CSS需要它，那么只会加载图片，所以如果没有匹配的选择器，那么它不会打扰加载图片。

Yes, you may use media queries in a <style> tag. The image is only loaded if the CSS requires it to be, so if nothing matches the selector then it won't bother loading the image.

这可能会更好包括媒体查询在您的外部CSS文件，虽然。没有理由将它包含在inlline中。

It would probably be better to include the media query in your external CSS file, though. There's no reason to include it inlline.

这篇关于我可以在内部CSS中使用媒体查询，它会避免加载我定义的背景图片吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！