Question

我正在一个网站上工作，但是下面提到了一个问题。我正在使用不同的2缩放级别的媒体查询，例如chrome浏览器的25％，50％，但是在chrome mac浏览器上无法正常工作。 Windows chrome上25％缩放级别的媒体查询正在Mac chrome上以33％缩放级别工作。请帮助

Answer 1

我认为您的问题源于非视网膜上25％的变焦等于33％上视网膜的变焦。
我的建议是手动调整您的媒体查询以适应差异。

@media (min-width: YOUR_RETINA_MIN_WIDTH) and (max-width: YOUR_RETINA_MAX_WIDTH) and (-webkit-min-device-pixel-ratio: 2)  {
    //your css here
}

可以将此查询添加到现有查询中，也可以单独查询：

您可以在逗号分隔的列表中组合多个媒体查询；如果列表中的任何媒体查询为true，则将应用关联的样式表。这等效于逻辑“或”运算。