为什么媒体查询不适用

问题描述

我阅读了该网站上的所有@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;
    }
}

我有视口标签，但是背景始终是黄色的。这是什么问题？

解决方法

在这里取出;

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

,

您应该尝试一些错误

body {background-color：yellow; } @media屏幕和（最小宽度：1070px）{body {background-color：red; }} @media屏幕和（最小宽度：1080像素）{正文{背景颜色：绿色； }

,

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