html - 媒体查询在调整窗口大小时没有响应，但是可以在Chrome Dev工具中使用

因此，我尝试创建一个“列表”（不是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)检查当前宽度为1446px。无论您如何调整它的大小，屏幕宽度都相同。

希望能有所帮助

关于html - 媒体查询在调整窗口大小时没有响应，但是可以在Chrome Dev工具中使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46186855/