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">

Answer 2

@media (min-width: 768px) {}适合我。还要将<meta name="viewport" content="width=device-width, initial-scale=1">添加到主标记

Answer 3

1。）你的第三个查询应该是这样写的：

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

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

2。）您制作了li元素inline元素。但是内联元素不能有任何填充 - 所有这些填充值都不会影响任何内容。因此，请将显示设置更改为inline-block。

Answer 4

应更改查询大小的顺序。在CSS中，最后一个有效查询获胜，因此查询会降到最小。最大的应该是最后的。

Answer 5

@media screen and (min-width: 320px) {
    //your css class
}
@media screen and (min-width: 321px) and (max-width:480px){
    //your css class
}

@media screen and (min-width: 481px) and (max-width:720px) {
    //your css class
}

@media screen and(min-width: 721px) and (max-width:1080px) {
    //your css class
}

@media screen and(min-width: 1080px) and (max-width: 1280px){
    //your css class
}

@media screen and (min-width: 1281px) and (max-width: 1920px){
    //your css class
}

尝试使用这样的查询，这种方式对我有用

Answer 6

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

Answer 7

将此添加到您的头标记中并关闭您未关闭的正确媒体查询大括号，并进行正确检查。

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

7 个答案: