浏览器调整大小和 Chrome 检查显示不同的布局，如何使用媒体查询解决此问题

Question

我为屏幕宽度添加了 css 和媒体查询，范围从 320 到最大宽度高于 1440 ， 当我使用chromes检查网页时，一切都显示良好，但是当我调整浏览器大小时，页面布局会以相同的大小分解，例如，如果我将浏览器大小调整为992 x 442作为浏览器调整大小， 布局中断，但是如果我在Chrome中检查时使用相同的分辨率，则页面布局是完美的。

这边发生了什么？ 我可以解决这个问题吗？

@media only screen
and (min-device-width: 769px)
and (max-device-width: 991px) {
    .fix-feedback{height: 80px;}
    .col-f-lt {
        width: 14% !important;
        height: 80px;
    }
    .col-f-lt p{line-height: 53px;}
    .col-f-rt {
        width: 83% !important;
    }
    .btn-send-fb {
        margin-top: 1px;
        display: inline-block;
    }
}
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1199px) {
    .navbar-nav>li {
        display: inline-block;
        float: inherit;
    }
    .navbar-nav {
        text-align: center;
        float: none;
        margin: 6px auto;
    }
}
@media (width: 768px){
    .col-f-lt{  width: 16%;  float: left;  background: #13929e;  padding: 33px 20px;  margin-right: 10px; }
    .col-f-rt {  margin: 2px 0 0;  width: 80%;  float: left;  padding: 10px 0 15px;    }
    .sav-btnn{ display: inline-block; width: 100%;}
    .sav-btnn a{ display: table; margin: 0 auto; float: inherit !important;   margin-bottom: 10px;}
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
    }
    .btn-send-fb {
        margin-top: 1px;
        display: inline-block;
    }
}

Answer 1

首先，min-device-width 和 max-device-width 被弃用，使用 min-width 和 max-width 。

这里的问题是，您的第一个查询从 769px 开始并以 991px 结束，然后您的第二个查询从 768px 开始，甚至在第一个查询开始之前，因此当屏幕介于 769px 和 991px 之间时，两者都将被应用。

如果要一个接一个地应用它们，请将秒min-width更改为 992px

根据注释，将第 3 个更改为 @media only screen and (min-width: 480px) and (max-width: 768px){ 。

请注意，当两个min-width/max-width都像这样使用时，它们在CSS中的位置无关紧要，尽管建议从低到高对它们进行排序，以便更容易地跟踪谁和何时发生的事情。

@media only screen
and (min-width: 769px)
and (max-width: 991px) {
    .fix-feedback{height: 80px;}
    .col-f-lt {
        width: 14% !important;
        height: 80px;
    }
    .col-f-lt p{line-height: 53px;}
    .col-f-rt {
        width: 83% !important;
    }
    .btn-send-fb {
        margin-top: 1px;
        display: inline-block;
    }
}
@media only screen
and (min-width: 992px)
and (max-width: 1199px) {
    .navbar-nav>li {
        display: inline-block;
        float: inherit;
    }
    .navbar-nav {
        text-align: center;
        float: none;
        margin: 6px auto;
    }
}
@media only screen
and (min-width: 480px)
and (max-width: 768px){
    .col-f-lt{  width: 16%;  float: left;  background: #13929e;  padding: 33px 20px;  margin-right: 10px; }
    .col-f-rt {  margin: 2px 0 0;  width: 80%;  float: left;  padding: 10px 0 15px;    }
    .sav-btnn{ display: inline-block; width: 100%;}
    .sav-btnn a{ display: table; margin: 0 auto; float: inherit !important;   margin-bottom: 10px;}
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
    }
    .btn-send-fb {
        margin-top: 1px;
        display: inline-block;
    }
}