浏览器不同缩放级别的媒体查询

  • Z时代
  • 2024-01-10
  • 分类：问答

我是使用CSS3媒体查询的自适应设计的新手。我清楚地了解我们如何使用这些媒体查询来定位不同的设备，但令我感到困惑的地方是浏览器缩放！！

：这是我正常的身体CSS规则

#body {
    margin: 0 auto;
    width: 70%;
    clear: both;
}

当我想更改此css规则以定位宽度在150px至600px范围内的设备时，我添加了此特定的媒体查询。

@media only screen and (min-width:150px) and (max-width:600px){
#body {
    margin: 0 auto;
    width: 90%;
    clear: both;
}
}

：我使用的是Google Chrome浏览器，当我放大到200％左右时，此特定的媒体查询就会起作用。

回答：

经过大量搜索。我找到了答案。

  • 我们不需要使用媒体查询来明确针对浏览器缩放。当我们放大浏览器时，它表现为不同的设备。

例如：如果我们以175％的水平缩放，则屏幕尺寸的像素宽度为732px（ ），即ipadmini的768px附近。因此，你可以通过使用同时针对Ipad的小型和浏览器缩放（@ 175％）的公共媒体查询

即

以上是 浏览器不同缩放级别的媒体查询 的全部内容， 来源链接： utcz.com/qa/422133.html

回到顶部