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

我在我的网页中使用此代码，我尝试了

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%;
    }
}

---

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

请在HTML页面中添加此代码

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

---

试着像这样使用您的查询，这种方式对我很有效

您在900媒体查询中留下了一个花括号。复制此代码并替换介质查询

@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) and (max-width: 601px) {
    li {
        display: inline;
        padding-left : 5%;
        padding-right: 5%;
    }
    li.three{
        padding-left: 7%;
    }
}

---

将此添加到您的头标签中，并关闭您未关闭的正确媒体查询括号。请检查是否正确。

@media（最小宽度：768px）{}

适合我。还要将

添加到head标签1。）您的第三个查询应该这样编写：

@media only screen and (min-width: 600px) and (max-width: 601px) {...

（逗号表示两个独立的选择器）

---

2.）您创建了

li

元素

inline

元素。但是内联元素不能有任何填充-所有这些填充值都不会影响任何内容。因此，将这些设置的显示设置更改为

内联块
。
应更改查询大小的顺序。在CSS中，最后一个有效的查询获胜，因此查询降到最小。最大的应排在最后。
将此行更改为仅介质屏幕和（最小宽度：600px）和（最大宽度：601px）{
它也只适用于600px-601px之间的宽度。是的，它应该适用于CSS中的每个宽度值。下面是它从最小宽度中获取值的链接：仅320px。你能解释一下你希望在链接框之间添加什么以响应，并控制填充以使内容更有趣吗t所有控制权都授予起始媒体查询
@media only screen and (min-width: 600px) and (max-width: 601px) {...