浏览器调整大小和 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;
    }
}

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

Browser Resize and Chrome Inspect shows different Layouts , how to fix this issue using media query?

html

css

google-chrome

web-inspector

twitter-bootstrap