Html 如何处理不符合'；镜头缩小了，看起来不太好

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

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

---

（a）当用户查看缩小的页面时，如何将背景颜色降级为平坦的背景颜色，或者最好（b）在不考虑缩放的情况下强制背景以1:1的比例呈现？

如果使用的是单个图像（而不是平铺），您可以使用

background size:100%

CSS属性强制浏览器不超过图像尺寸

由于您使用的是互动程序，因此需要控制显示窗口的大小以控制互动程序的数量——您可以使用下面的元标记来防止在移动设备上缩放（向内或向外），并使用媒体查询来自定义CSS样式：

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

---

在响应性网站或移动目标网站中，最好显示缩放。如果不需要，可以通过针对缩放设备的媒体查询来控制背景图像显示

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

---

如果您想针对手机等特定元素，可以使用媒体查询并覆盖您的背景样式。