css - 媒体查询不执行

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