响应式设计:针对不同屏幕尺寸的不同图像

Question

我们的客户希望在较小的屏幕上拥有与在较大屏幕上不同的横幅图像.不仅缩小/拉伸以适合,而且实际上替换不同的图像.全尺寸图像相当复杂 - 有几个人,两个徽标和一些装饰性文字 - 因此对于较小的图像,他们想要裁剪一些人,删除徽标等.所以他们想要最大的,桌面最复杂的图像,中型设备的图像更简单,然后更小,更简单的图像.

做这个的最好方式是什么？

我的第一个想法是包括所有三个图像,并使用@media min/max widths使其中两个在任何给定大小都不可见.喜欢:

@media (max-width: 400px) { .smallimg {display: block} .midimg {display: none} .bigimg {display: none} }
@media (min-width: 401px) and (max-width: 700px)  { .smallimg {display: none} .midimg {display: block} .bigimg {display: none} }
@media (min-width: 701px)  { .smallimg {display: none} .midimg {display: none} .bigimg {display: block} }

这应该工作,但每次都会下载所有三个图像,这似乎是浪费带宽.

我可以将图像从img标签更改为css背景图像.会更好吗？这会避免下载这三个还是仍然会这样做？

我正在考虑编写一些JavaScript来根据屏幕大小动态更新img标签中的URL,但这似乎是一堆复杂性.

我简要地想过将徽标和文本分开并将实际图片分成几块,然后尝试将它们全部组合成重叠图像.但这听起来似乎要做很多工作,然后我必须确保它看起来正确的尺寸,不是那么容易缩小或拉伸等等.虽然它可能在这个特定的我希望将来可以使用一般的解决方案.

有人做过类似这样的事情并对最好的方法有一些想法吗？

Answer 1

你可以background在media queries. 仅当 CSS 要求时才会加载图像，因此如果没有任何内容与选择器匹配，则不会加载图像。

这篇文章一定会对您有所帮助。