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

＆＃13;

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

＆＃13;

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

，嵌套功能无效

Answer 2

我认为你使用嵌套的css，这样你的代码就不起作用了

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

尝试使用上面的代码谢谢:)）

@media屏幕不起作用

2 个答案: