为什么媒体查询不适用

Question

我阅读了该站点上的所有@media 主题，代码似乎应该可以工作

body
{
    background-color: yellow;
}

@media screen and (min-width: 1080px;) and (max-width: 2000px;)
{
    body
    {
        background-color: green;
    }
}

@media screen and (max-width: 1079px;)
{
 body
    {
        background-color: red;
    }
}

我有视口标签，但背景仍然总是黄色...有什么问题？

Answer 1

这里只是去掉;

body
{
    background-color: yellow;
}

@media screen and (min-width: 1080px) and (max-width: 2000px)
{
    body
    {
        background-color: green;
    }
}

@media screen and (max-width: 1079px)
{
 body
    {
        background-color: red;
    }
}

link to code example

Answer 2

有些错误你应该试试这个

正文{ background-color：黄色； } @media screen and (min-width: 1070px) { body { background-color: red; } } @media screen and (min-width: 1080px){ body { background-color: green; } }

Answer 3

我认为您应该检查 html 文档的头部是否有 <meta> 标签，没有标签，您的媒体查询将不会生效

为什么媒体查询不适用

Why media queries doesn't apply

css

viewport

media-queries

responsive-design