@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

回答

相關問題