我想使用媒体查询使我的网站响应窗口大小的变化。这是一个基本的好做法，允许人们在任何设备上使用我的网站。
目前，我正在用类似以下的行来做这件事:
@media (min-width: 30rem) and (max-width: 40rem) {
问题是这样做会破坏缩放。当你放大时，你会浏览媒体查询。这太荒谬了。缩放的全部目的是看到全尺寸页面的放大区域，而不是改变页面。
因此，问题如下:我如何使媒体查询响应窗口大小的变化，而不是缩放级别的变化?
我遇到过类似的问题，这是迄今为止对我有效的解决方案。在这个例子中，我想隐藏红框只有当我们在移动设备上，而不是在缩放桌面。
基于:Andrii Verbytskyi的回答。*在他的解决方案中，他使用matchQuery用Javascript处理缩放，我刚刚把他的工作翻译成CSS，它似乎工作得很好。
假设我们有一个简单的媒体查询规则定义为:小于或等于768px的宽度是移动的和其他都是桌面我们有了元素zoom-test;定义如下:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoom-test</title>
</head>
<body>
<div class="zoom-test"></div>
<style>
.zoom-test{
width: 200px;
height: 200px;
background-color:red;
}
@media screen and (max-width: 768px){
.zoom-test{
display: none;
}
}
@media (-webkit-min-device-pixel-ratio: 1.1), (min--moz-device-pixel-ratio: 1.1), (-o-min-device-pixel-ratio: 10/9), (min-resolution: 1.1dppx),(min-width: 769px){
.zoom-test {
display: block;
}
}
</style>
</body>
</html>在大多数浏览器中捕获大于1的缩放的查询:
- -webkit-min-device-pixel-ratio: 1.1
- min - moz-device-pixel-ratio: 1.1
- -o-min-device-pixel-ratio: 10/9
- min-resolution: 1.1 dppx
捕捉视口宽度:
- min-width: 769px(以桌面查询为例)
在Chrome, Safari和Firefox上测试
也读这篇文章吧，很清楚。
希望有帮助!