我正在开发一个响应式网站,每个页面都有一个在CMS中定义的大型英雄形象。我想避免在手机上下载该背景图像。
我能想到的唯一方法就是在页面头部添加一些内联CSS,如下所示:
<style type="text/css">
@media only screen and (min-width: 680px) {
.hero-image { background-image: url(../images/image.jpg); }
}
</style>
首先,我可以在内联CSS中使用媒体查询吗?
其次,这是否会避免在手机上下载图像?
第三,有没有更好的方法?
谢谢
发布于 2018-03-06 15:53:40
是的,你可以在<style>
标签中使用媒体查询。该图像只有在CSS需要时才会被加载,所以如果没有匹配的选择器,那么它不会打扰加载图像。
不过,将媒体查询包含在外部CSS文件中可能会更好。没有理由将它包含在内。
发布于 2018-03-06 16:56:21
不,你似乎不能内联@媒体标签:
https://stackoverflow.com/questions/-100007528
复制相似问题