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

Posted 2023-03-05

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

【英文标题】：Can I use a media query in internal CSS, and will it avoid loading the background images I define?

【发布时间】：2012-10-06 02:14:24

【问题描述】：

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

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

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

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

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

三、有没有更好的办法？

谢谢

【问题讨论】：

这里所说的叫做“内部css”，不是内联的。

@Urs 修复了它，具有误导性。

Is it possible to put CSS @media rules inline?的可能重复

【参考方案1】：

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

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

【讨论】：

谢谢。内联包含它的原因是它需要由 CMS 输出（每页会有一个唯一的英雄图像）。

我用类似的方式实现了

@NiettheDarkAbsol 您说没有理由将其包含在内，但事实并非如此。当您动态生成内容（例如从数据库中动态提取数据和图像）时，如果内容完全不同，则必须使用内部 css 来设置内容样式。例如，我有一个从服务器上的数据库生成的事件日历。将事件添加到日历时，它会为该事件创建一个页面。因为我希望事件图像在不同的设备上看起来正确，所以在 db.xml 中引用了不同的文件。我必须使用内部 css 来定义页面的媒体查询

【参考方案2】：

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

请参考： Is it possible to put CSS @media rules inline?

【讨论】：

虽然原始问题的措辞（至少截至今天）确实声明了“内联”，但 OP 给出的代码表明他们询问的是在内部放置媒体查询，而不是内联。常见的错误，我大约每周做一次。 =)

【参考方案3】：

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