17

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

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

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

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

其次，这会避免在手机上下载图像吗？

三、有没有更好的办法？

谢谢

4

3 回答 3

8

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

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

于 2012-10-16T19:27:32.330 回答
5

不，您似乎无法内联 @media 标签：

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

于 2013-03-19T16:41:37.477 回答
1

两步媒体查询可能会更好，一个以 CSS 开始但以 jQuery 结束。用 ID 标记您的 div，以便 jQuery 可以找到它们。该过程在这里详细解释：http ://www.fourfront.us/blog/jquery-window-width-and-media-queries

于 2013-08-04T16:13:48.560 回答