css - @media 屏幕不工作

Question

@media screen and (min-width: 501px) and (max-width: 769px)

即使窗口大小为 1920px，也会采用此媒体查询之间的代码!

看这段代码:

.row-contact{
    .col-xs-12:first-child {
        margin-top: 0;
    }
}

@media screen and (min-width: 501px) and (max-width: 769px){
    .row-contact {
        padding: 0 !important;

        .col-xs-12:first-child {
            margin-top: 12%;
        }
    }
}

全屏时我有margin-top: 12%，但是，它必须是margin-top: 0!

为什么这不起作用？

编辑我找到了解决方案!我在写 SCSS 指令之前关闭了媒体查询

感谢您的帮助! :D

Answer 1

.row-contact{
    .col-xs-12:first-child {
        margin-top: 0;
    }
}

@media screen and (min-width: 501px) and (max-width: 769px){
    .row-contact {
        padding: 0 !important;
    }
     .col-xs-12:first-child {
          margin-top: 12%;
     }
}

尝试这种方式，因为如果您不使用 LESS 或 SCSS

，嵌套将不起作用