メディアクエリが機能しないのはなぜですか？

コードがMoving from HTML Grid Systems to CSS Grid Systemsのページを作成しました。しかし、私のページは動作しないので、メディアクエリは機能していないようです。彼らはなぜ働かないのですか？メディアクエリが機能しないのはなぜですか？

<!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

これはCSSではなくSass（SCSS）のようです。 – Moob

メディアクエリが含まれているセレクタグループ、周りにいない他の方法CSSのlintはCSS Lint

HTMLいくつかの問題があると言います。あなたがそうのようなあなたのCSSを変更する必要が

：あなたはCSSブロックにエラーがある場合

.l-fg3 > div { 
    ... 
} 

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

出典

2016-04-08 15:01:58

あなたは正しいですが、主な問題は、OPがCSSではなくSCSSを投稿したことです。 – Moob

、ブロック全体が処理を停止します。 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>

あなたは前処理済み（less/sass/etc）とバニラCSSを切り替えることができます。 http://codepen.io/anon/pen/dMJqOz

出典

2016-04-08 15:10:23 Moob

さて、あなたを手に入れました。私は別の問題があります： @メディア画面と（最小幅：600px）{ .l-fg3> div { マージン：10px; フレックスベース：31％; （最小幅：600ピクセル）{ .featured { フレックスベース：43％; } } 私のおすすめのdivは43％であることを望んでおらず、同じままです - 31％。どうすれば解決できますか？ –

[Specificity]（https://developer.mozilla.org/en/docs/Web/CSS/Specificity）のように聞こえます。 2つのセレクタは競合しており、この場合は最初のセレクタが2番目のセレクタよりも優先されます。あなたのセレクタでより具体的なものを試してみてください。例： '.l-fg3> div.featured {flex-basis：43％; } ' – Moob

ええ、そうです。ありがとう！ –

メディアクエリが機能しないのはなぜですか？

答えて

関連する問題