@media查詢不起作用（由POSTCSS生成的CSS代碼）

此問題已被多次詢問。我試圖將解決方案應用到我的項目中，但我仍然無法獲得@media查詢的工作。我的HTML代碼。使用POSTCSS使用psotcss，整齊插件@media查詢不起作用（由POSTCSS生成的CSS代碼）

<html> 
<head> 
    <title>Starter Template</title> 
    <meta name="viewport" content="width=device-width" /> 

    <link rel="stylesheet" type="text/css" href="css/dest/grid.css" media="screen"> 
</head> 
<body> 
    <div class="container"> 
     <div class="col-6"><p>This is some text</p></div> 
     <div class="col-6"><p>This is another some text</p></div> 
     <div class="col-6"><p>Yet another some text</p></div> 
     <div class="col-6"><p>Also, This is another some text</p></div> 
    </div> 
</body>

我CSS代碼

.container:after 
{ 
    clear: both; 

} 

.container 
{ 
    max-width: 64em; 
    margin-left: auto; 
    margin-right: auto; 
    *zoom: 1; 
} 
.container:before, .container:after 
{ 
    content: " "; 
    display: table; 
} 
.col-6 
{ 
    @media screen and (max-width: 767.999px) 
    { 
     display: block; 
     float: left; 
     margin-right: 2.35765160%; 
     width: 100.00000000%; 
     &:last-child 
     { 
      margin-right: 0; 
     } 
    } 

    display: block; 
    float: left; 
    margin-right: 2.35765160%; 
    width: 48.82117420%; 
    margin-right: 0 
}

來源

2015-11-02 Bassam Aklan

你必須把@media放在'.col-6 {}'規則之外。不允許使用CSS類嵌套。瀏覽器的webconsole是怎麼說的？ –

你說得對。我認爲問題在於我的postcss插件沒有將代碼轉換爲正確的語法。我可以與這個插件的開發人員覈對。 –

你必須把.COL-6 {}外治@media產生

CSS代碼。不允許使用CSS類嵌套。

（放在這裏，所以你可以關閉這個問題......）

來源

2015-11-03 13:03:24

@media查詢不起作用（由POSTCSS生成的CSS代碼）

回答

相關問題