媒体查询不执行

Question

我有以下两个媒体查询：

@media (max-width: 800px) {
        .login{
            margin-top: 5%;
        }
    }
}

@media (max-width: 204px) {
        .login{
            text-align: center;
            margin-right: 0%;
        }
    }
}

• 桌面到移动
• 注释掉顶部查询时，底部查询执行
• 在开发者工具中应用底部查询样式时有效
• 我读过有关查询的内容：https://css-tricks.com/logic-in-media-queries/

一定是没看懂吧

Answer 1

看起来你的右大括号太多了，这可能会把事情搞砸。

@media (max-width: 800px) {
    .login {
        margin-top: 5%;
    }
}

@media (max-width: 204px) {
    .login {
        text-align: center;
        margin-right: 0%;
    }
}

Answer 2

您添加了一个额外的右大括号。请删除它。

@media (max-width: 800px) {
    .login {
        margin-top: 5%;
    }
}

@media (max-width: 204px) {
    .login {
        text-align: center;
        margin-right: 0%;
    }
}