媒体查询在调整窗口大小时没有响应，但在 Chrome 开发工具中工作答案

【问题标题】：Media query not responding on window resize, but working in Chrome Dev tools媒体查询在调整窗口大小时没有响应，但在 Chrome 开发工具中工作
【发布时间】：2017-09-12 23:53:48
【问题描述】：

所以我试图有一个“列表”（不是html 列表，而是逻辑方式中只有 6 张并发图片），但在某个断点处，两张图片彼此相邻移动，并且媒体查询在 Chrome 开发工具和手机上的 Adobe Dreamweaver 实时预览中工作，但在浏览器调整大小时，媒体查询没有响应。这是html:

    <div class="gray-bg">
          <!-- Item 1 -->
            <div class="flexbox-row">
              <div class="sec-heading space-between">
                   <img src="assets/images/header1Web.png" class="img-responsive" alt="Cinque Terre" usemap="#plus">
              <map name="plus" id="plus"><area alt="" title="" href="#" shape="poly" coords="1904,371,1898,358,1890,351,1782,423,1917,426,1917,300,1891,321,1875,340,1803,401,1790,415,1782,418" /></map>
              </div>
            <!-- Item 2 -->
              <div class="sec-heading space-between">
                   <img src="assets/images/header2Web.png" class="img-responsive" alt="Cinque Terre">
              </div>
            </div>
          <!-- Item 3 -->
            <div class="flexbox-row">
              <div class="sec-heading space-between">
             <img src="assets/images/header3Web.png" class="img-responsive" alt="Cinque Terre">
             </div>
          <!-- Item 4 -->
              <div class="sec-heading space-between">
             <img src="assets/images/header4Web.png" class="img-responsive" alt="Cinque Terre">
             </div>
          </div>
          <!-- Item 5 -->
            <div class="flexbox-row">
              <div class="sec-heading space-between">
             <img src="assets/images/header5Web.png" class="img-responsive" alt="Cinque Terre">
             </div>
          <!-- Item 6 -->
              <div class="sec-heading space-between">
             <img src="assets/images/header6Web.png" class="img-responsive" alt="Cinque Terre">
             </div>
             </div>
    </div><!-- / .gray-bg -->

这里是合适的CSS:

.flexbox-row {
    display: block;
}
@media only screen and (min-device-width: 1446px) {
.flexbox-row {
    display: flex;
}}

【问题讨论】：

(min-device-width: 1446px) 与(max-width: 1446px) 不同，min-device-width 正在检查您的屏幕宽度是否为1446px 而(max-width: 1446px) 是您当前的宽度为xxxPX。不管你怎么调整它的屏幕宽度还是一样的
@masterpreenz 就是这样！这是我对媒体查询的误解！！谢谢！！我很乐意给你答案！
我应该把它发布为答案，你去吧

标签： html css

【解决方案1】：

(min-device-width: 1446px) 与 (max-width: 1446px) 不同，min-device-width 正在检查您的屏幕宽度是否为 1446 像素，而 (max-width: 1446px) 是您当前的宽度是否为 1446 像素。不管你怎么调整它的屏幕宽度都是一样的。

希望有帮助

【讨论】：

【解决方案2】：

要让 flexbox-row 做出反应“当屏幕的最大宽度为 1446px”时，代码是：

@media only screen and (max-device-width: 1446px) {
.flexbox-row {
    display: flex;
}}

而不是

@media only screen and (min-device-width: 1446px) {
.flexbox-row {
    display: flex;
}}

【讨论】：