Question

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

所以唯一可用的媒体是（最小宽度：4100像素）和（最大宽度：8000像素）

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

如何解决这个问题？

/*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

在'之后'之前你应该有两个冒号而不是一个。

circle.on::after

在第13条规则，第1部分。并且在第二部分的末尾附近。

Answer 2

您需要删除每个媒体查询之间的杂散字符。如果您选中此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;
    }

}

多个媒体查询无法按预期工作

2 个答案: