Question

所以我试图找到一个“列表”（不是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;
}}

Answer 1

(min-device-width: 1446px)与(max-width: 1446px)不同，min-device-width正在检查您的屏幕宽度是否为1446px，如果您的当前宽度为1446px则为(max-width: 1446px)。无论你如何调整大小，屏幕宽度仍然相同。

希望有所帮助

Answer 2

当屏幕的最大宽度为1446px时，

使flexbox-row做出反应＆＃34;代码是：

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

而不是

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

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

2 个答案: