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

Question

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

当这些页面被缩小（例如在手机上）时，用户会看到莫尔条纹图案，这会破坏效果。

当用户观看缩小的页面时，我怎样才能（a）降级为平坦的背景颜色，或者最好（b）强制无论缩放如何以1：1的比例渲染背景？

Answer 1

如果您使用的是单张图片（不是图块），则可以使用background-size: 100% CSS属性强制浏览器不超过图片尺寸。

由于 使用磁贴，您需要控制显示窗口的大小以控制磁贴的数量 - 您可以使用下面的META标记来防止在移动设备上放大（在out），并使用媒体查询来自定义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
}