如何处理缩小后看起来不好的背景

Question

我正在工作的网站在某些页面元素后面大量使用平行条纹背景(它基本上是一个1x2像素的背景图像，平铺以创建复古的水平带效果)。

当这些页面被放大时(例如在手机上)，用户看到的是破坏效果的云纹图案。

我该如何(a)在用户查看缩小的页面时降级为平面背景色，或者最好(b)强制背景以1:1呈现，无论缩放如何?

Answer 1

如果您使用的是单个图像(而不是平贴)，则可以使用background-size: 100% CSS属性强制浏览器不超过图像尺寸。

因为你的是使用tile，你需要控制显示窗口的大小来控制tile的数量——你可以使用下面的META标签来防止在移动设备上缩放(放大或缩小)，并使用媒体查询来定制CSS样式:

<meta name="viewport" content="width=device-width, 
   initial-scale=1,
   maximum-scale=1, 
   user-scalable=0"/> <!--320-->

Answer 2

在响应式网站或移动目标网站，这将是很好的显示缩放。如果你不希望这样，你可以通过针对缩放设备的媒体查询来控制背景图像的显示。

@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) { 
    your css can come here
}