@media screen does not work

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

即使窗口的大小为1920px，也会执行此媒体查询之间的代码！@media screen does not work

看看这段代码：

.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

来源

2017-04-07 Emilien

您可能想向我们展示生成的css？也许这可能有助于解决您的问题 – SheperdOfFire

您的代码正在工作，请参阅https://jsfiddle.net/wohe9daL/尝试调整面板的大小以检查！ – demonofthemist

哦..所以我不知道为什么它不适合我的代码.. – Emilien

.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

来源

2017-04-07 08:17:11 LKG

我想你使用嵌套的CSS，使您的代码无法正常工作

嵌套不工作

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

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

来源

2017-04-07 08:19:42

如果我使用它，每个.col-xs-12都会触摸，而我不想要这个^^ – Emilien

@media screen does not work

回答

相关问题