CSS 中的媒体查询无法正常工作

Question

我在网页中使用此代码，并尝试了不同的设置，min-width但它仅从宽度最小的媒体查询中获取值。

@media only  screen and (min-width: 900px) {
    li{
        display: inline;
        padding-left : 5%;
        padding-right: 5%;
    }
    li.one{
        padding-left: 13%;
    }
@media only screen and (min-width: 800px) {
    li {
        display: inline;
        padding-left : 5%;
        padding-right: 5%;}
    li.two{
        padding-left: 9%;
    }
}
@media only screen and (min-width: 600px),screen and (max-width: 601px) {
    li {
        display: inline;
        padding-left : 5%;
        padding-right: 5%;
    }
    li.three{
        padding-left: 7%;
    }
}

不知道是什么阻止其他查询正常工作。

Answer 1

请将此代码添加到您的 HTML 页面中

<meta name="viewport" content="width=device-width, initial-scale=1.0">