作为一个相对初学者,我似乎很难在基于内容而不是特定设备创建媒体查询之间找到适当的平衡。
我现在正在努力处理一个着陆页,该页面的 CSS 背景图像覆盖了整个视口(viewport)。为了确保图像在所有移动设备上保持一致(即不裁剪),我开始编写基于设备的媒体查询,每个媒体查询加载不同版本的图像。当我为四种不同的 iPhone(纵向和横向)创建它们时,警钟已经响起。
是否有更好的方法来实现我正在尝试做的事情,或者我应该接受图像在不同设备上的外观不同?
感谢所有帮助。
史蒂夫
最佳答案
http://sixrevisions.com/css/responsive-background-image/
body {
background: url(background-photo.jpg) center center cover no-repeat fixed;
}
这在所有设备上看起来应该都比较好。
关于html - 使响应式背景图像在设备间保持一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31612913/