css - 多个媒体查询未按预期工作

Question

我有多个媒体查询，但只有第一个媒体有效。

所以唯一有效的媒体是(最小宽度:4100px)和(最大宽度:8000px)

和另一个就好像它们不在样式表文件中一样。

如何解决这个问题？

/*phone*/

@media only screen and (min-width: 5000px)  AND (max-width: 8000px) {

    body {

        font-size: 65px;
    }

    header {
        height: 182px;
    }

    #header_photo {
        width: 460px !important;
        height: 180px;
    }

    td, th {
        padding: 50px 85px;
    }

    .status_table {
        padding: 110px;
    }

    .end_table {
        padding: 110px;
    }

    .total-sms, .total_calls, .tot_sh {
        padding: 56px;
    }

    .active_login {
        padding: 15px 10px 10px
    }

    .second_section {
        margin-top: 295px;
    }

    .pie_chart_main {
        margin-left: 890px;
    }

    .pie_chart {
        width: 2600px;
        height: 1650px;
    }

    text {
        font-size: 55px;
    }

    circle.on:after {
        content: 'r="20"';
        width: 100px;
        font-size: 40px;
    }

    .date {
        margin-left: 1800px;
        font-size: 60px;
    }

    .num_style {
        font-size: 90px;
    }
}

​

@media only screen and (min-width: 2250px) and (max-width: 4000px) {

    body {

        font-size: 30px;
    }

    td, th {
        padding: 20px 35px;
        border: 1px solid #fff;
        text-align: center;
    }

    .status_table {
        padding: 50px;
    }

    .end_table {
        padding: 50px;
    }

    .total-sms, .total_calls, .tot_sh {
        padding: 36px;
    }

    .active_login {
        padding: 15px 10px 10px
    }

    .second_section {
        margin-top: 155px;
    }

    .pie_chart_main {
        margin-left: 290px;
    }

    .pie_chart {
        width: 1300px !important;
        height: 850px !important;
    }

    text {
        font-size: 25px;
    }

    circle.on:after {
        content: 'r="20"';
        width: 100px;
        font-size: 40px;
    }

    .date {
        margin-left: 900px;
        font-size: 34px;
    }
}

​

@media only screen and (min-width: 1600px) and (max-width: 2200px) {

    body {
        font-size: 19px;
    }

    td, th {
        padding: 10px 18px;
        border: 1px solid #fff;
        text-align: center;
    }

    .status_table {
        padding: 23px;
    }

    .end_table {
        padding: 23px;
    }

    .total-sms, .total_calls, .tot_sh {
        padding: 15px;
    }

    .active_login {
        padding: 15px 10px 10px
    }

    .second_section {
        margin-top: 100px;
    }

    .pie_chart_main {
        margin-left: 130px;
    }

    .pie_chart {
        width: 900px;
        height: 550px;
    }

    .date {
        margin-left: 500px;
        font-size: 24px;
    }

}

​

Answer 1

您需要删除每个媒体查询之间的杂散字符。如果你检查这个jsfiddle ，您会看到它是一个红色背景的点。

下面的示例显示了它的工作原理，尽管我更改了宽度的值以便在标准屏幕上调整浏览器大小时可以看到它。

/*phone*/

body {
  background: gray;
}


@media only screen and (min-width: 800px)  AND (max-width: 1000px) {

    body {
        background: green;
    }
  
}


@media only screen and (min-width: 550px) and (max-width: 750px) {

    body {
        background: yellow;
    }
  
}

@media only screen and (min-width: 300px) and (max-width: 500px) {

    body {
        background: red;
    }

}