媒体查询适用于错误的屏幕尺寸答案

【问题标题】：Media query works on wrong screen size媒体查询适用于错误的屏幕尺寸
【发布时间】：2019-12-10 15:09:33
【问题描述】：

我正在尝试使用 CSS 媒体查询使我的设计响应式问题是当屏幕尺寸在 992 像素和 1199 像素之间时我需要具有容器特定宽度但问题是当屏幕尺寸达到 1080 时它会自动应用另一个值从大屏幕

这是显示屏幕实际大小和应用的媒体查询的屏幕截图

这是我使用的引导屏幕尺寸https://pastebin.com/YkH6LcUf

@media (min-width:992px) and (max-width:1199px) { /*   medium devices */

    .container {
        width:800px !important;
    }
    .case-study .left-div {
        width:60%;
        left:0;
    }
    .case-study .right-img {
        width:500px;
        right:0;
    }

}

在 992px 和 1199px 之间的屏幕尺寸上，容器宽度应为 800px，但不是

【问题讨论】：

标签： css media-queries responsive

【解决方案1】：

从1080/1200 = 0.9 的比率来看，我猜测您的浏览器处于错误的缩放模式（即 90%）。

如果是这种情况，请尝试为您的浏览器重置缩放。

【讨论】：

【解决方案2】：

我不认为您的代码存在一般问题，但可能是您包含 CSS 的顺序或@Hao Wu 所写的那样，您可能无意中设置了浏览器缩放，请尝试通过按重置它Ctrl/Cmd + 0

const container = document.querySelector('.container');

window.addEventListener('resize', (e) => {
   container.dataset.width = container.getBoundingClientRect().width + 'px';
});

window.addEventListener('load', (e) => {
   container.dataset.width = container.getBoundingClientRect().width  + 'px';
});

.container {
    background: lightcoral;
    height: 300px;
}
.container:before {
    content: attr(data-width);
}

@media (max-width:768px) { /*   mobiles */
 
    .container {
        width:750px;
    }
}
 
@media (min-width:768px) and (max-width:991px) { /*   small devices */
    .container {
        width:750px;
    }
}
 
@media (min-width:992px) and (max-width:1199px) { /*   medium devices */
    .container {
        width:970px;
    }
}
 
@media (min-width:1200px) { /*   large devices */
    .container {
        width:1270px;
    }
}


@media (min-width:992px) and (max-width:1199px) { /*   medium devices */

    .container {
        width:800px;
    }
}

<section class="case-study">
  <div class="container">
  
  </div>
</section>

【讨论】：

这可能不是因为发生了!important 的顺序。由截图可知，当屏幕宽度达到1080px时，相应的规则就消失了，而不仅仅是被覆盖了。