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

【问题标题】：media queries in css not working properlycss 中的媒体查询无法正常工作
【发布时间】：2018-11-19 07:49:26
【问题描述】：

我在我的网页中使用此代码，并尝试了 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%;
    }
}

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

【问题讨论】：

将此行更改为 @media only screen and (min-width: 600px) and (max-width: 601px) { 也仅适用于 600px-601px 之间的宽度
是的，它应该是，但它适用于每个宽度值
请整理一下你的 CSS。
这是链接-jsfiddle.net/qdgch6tm

标签： html css media-queries

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

1.) 你的第三个查询应该这样写：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

@media (min-width: 768px) {} 为我工作。还将<meta name="viewport" content="width=device-width, initial-scale=1">添加到head标签

【讨论】：

【解决方案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
}

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

【讨论】：

它仅从 min-width:320px 中获取值

【解决方案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%;
    }
}

【讨论】：

你能解释一下你想要什么
链接框之间的填充以响应并希望控制填充以使内容更有趣，但所有控制权都交给了起始媒体查询

【解决方案7】：

将此添加到您的 head 标签中，并关闭您没有关闭的正确媒体查询大括号并正确检查。

【讨论】：