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 Inspect显示不同的布局，如何使用媒体查询解决此问题？

1 个答案: