0

所以我意识到当前响应式网页设计中的一个大问题是你在可能不需要它们时下载大图像，比如在手机上——这会导致严重的性能下降——你也可以通过 JS 条件加载来达到一定程度；所以我的问题是我不能在媒体查询中将我的大部分图像加载为背景图像并克服这个问题，直到出现更好的情况？例子：

/* base styles */
 @media all and (min-width: 53.75em) {
 header .inner{
 background: url(‘../images/football_bg.png’) bottom right
no-repeat;
}

显然这完全是非语义的，但可以解决性能问题吗？

4

2 回答 2

1

如果你真的关心语义，你可以考虑使用自适应图像：http ://adaptive-images.com/ 这里还有一篇关于图像和响应式设计解决方案的好文章。http://css-tricks.com/which-responsive-images-solution-should-you-use/

于 2013-06-05T22:59:00.060 回答
1

是的，使用媒体查询和背景图像就像一种魅力，所以如果它非常适合您的项目，那么一定要使用它。

但是，使用背景图像并不总是可行的。

如果是这种情况，一个选项是自适应图像，它将根据访问者的视口提供不同大小的图像。改造现有网站并检查它是否适合您很容易。

如果您使用Foundation ，另一个可能性是他们刚刚发布了一些看起来非常有趣的类似内容：Interchange

祝你好运！

于 2013-06-05T23:08:46.023 回答