爲什麼我的媒體查詢不起作用？

我用Moving from HTML Grid Systems to CSS Grid Systems的代碼做了一頁。但是，我的頁面無法正常工作，媒體查詢似乎無法正常工作。他們爲什麼不工作？ CSS皮棉說，有一些問題CSS Lint 爲什麼我的媒體查詢不起作用？

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <!-- <meta name="viewport" content="width=device-width"> --> 
    <title>Flex-training</title> 
    <link rel="stylesheet" href="main.css" /> 
</head> 

<body> 
    <div class="l-flex"> 
    <div id="back" class="l-fg3"> 
     <div>Featured Item</div> 
     <div>Featured Item</div> 
     <div>Grid item</div> 
     <div>Grid item</div> 
     <div>Grid item</div> 
    </div> 
    </div> 
</body> 
</html>

CSS：

.l-fg3 { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-flex-wrap: wrap; 
     -ms-flex-wrap: wrap; 
      flex-wrap: wrap; 
    margin: -10px; 
} 

.l-fg3 > div { 
    -webkit-flex-basis: 100%; 
     -ms-flex-preferred-size: 100%; 
      flex-basis: 100%; 
    @media screen and (min-width: 600px) { 
    margin: 10px; 
    -webkit-flex-basis: calc(33.333%-20px); 
     -ms-flex-preferred-size: calc(33.333%-20px); 
      flex-basis: calc(33.333%-20px); 
    } 

    > div:nth-child(1), 
    > div:nth-child(2) { 
    @media (min-width: 600px) { 
     flex-basis: calc(50% - 20px); 
    } 
    } 
} 

.l-flex { 
    overflow-x: hidden; 
} 


div { 
    border: 0.2px solid #506183; 
    border-radius: 5px; 
    background-color: #81f6a9; 
} 
#back { 
    background-color: #36a4c3 
}

來源

2016-04-08 Taras Ivanitsky

這看起來像Sass（SCSS）而不是CSS。 – Moob

媒體查詢包含選擇組，而不是周圍的其他方式。

你需要修改你的CSS像這樣：

.l-fg3 > div { 
    ... 
} 

@media screen and (min-width: 600px) { 
    .l-fg3 > div { 
    ... 
    } 
}

來源

2016-04-08 15:01:58

你說得對，但我認爲主要問題是OP已經發布了SCSS而不是CSS。 – Moob

當你有一個CSS塊的錯誤，整個街區將停止處理。 CSS Lint正在告訴你到底是什麼問題。例如：

> div:nth-child(1), 
> div:nth-child(2)

來源

2016-04-08 15:05:57

這是SCSS。它看起來像它的工作原理編譯一次到CSS：

（另外，你需要把值之間的空間，在你calc()功能。）

.l-fg3 { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-flex-wrap: wrap; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    margin: -10px; 
 
} 
 

 
.l-fg3 > div { 
 
    -webkit-flex-basis: 100%; 
 
    -ms-flex-preferred-size: 100%; 
 
    flex-basis: 100%; 
 
} 
 
@media screen and (min-width: 600px) { 
 
    .l-fg3 > div { 
 
    margin: 10px; 
 
    -webkit-flex-basis: calc(33.333% - 20px); 
 
    -ms-flex-preferred-size: calc(33.333% - 20px); 
 
    flex-basis: calc(33.333% - 20px); 
 
    } 
 
} 
 
@media (min-width: 600px) { 
 
    .l-fg3 > div > div:nth-child(1), 
 
    .l-fg3 > div > div:nth-child(2) { 
 
    flex-basis: calc(50% - 20px); 
 
    } 
 
} 
 

 
.l-flex { 
 
    overflow-x: hidden; 
 
} 
 

 
div { 
 
    border: 0.2px solid #506183; 
 
    border-radius: 5px; 
 
    background-color: #81f6a9; 
 
} 
 

 
#back { 
 
    background-color: #36a4c3; 
 
}

<div class="l-flex"> 
 
    <div id="back" class="l-fg3"> 
 
     <div>Featured Item</div> 
 
     <div>Featured Item</div> 
 
     <div>Grid item</div> 
 
     <div>Grid item</div> 
 
     <div>Grid item</div> 
 
    </div> 
 
    </div>

我已經把它作爲一個codepen，所以你可以在預處理（less/sass/etc）和香草CSS之間切換： http://codepen.io/anon/pen/dMJqOz

來源

2016-04-08 15:10:23 Moob

好的，我找到了你。現在我有另一個問題： @媒體屏幕和（最小寬度：600px）{1} {fg3> div {margin}：10px;柔性基礎：31％; } @媒體屏幕和（最小寬度：600px）柔性基礎：43％; } } 我的特色div不想成爲43％，他們保持不變 - 31％。我該如何解決它？ –

聽起來像[特異性]（https://developer.mozilla.org/en/docs/Web/CSS/Specificity）。這兩個選擇器正在競爭，在這種情況下，第一個選擇器勝過第二個選擇器。嘗試更多*特定*與您的選擇器，例如：'.l-fg3> div.featured {flex-basis：43％; }' – Moob

是的，沒錯。謝謝！ –

爲什麼我的媒體查詢不起作用？

回答

相關問題