Warum funktionieren meine Medienabfragen nicht?

Ich habe eine Seite mit Code von Moving from HTML Grid Systems to CSS Grid Systems gemacht. Aber meine Seite funktioniert nicht so wie es sich gehört, Medienanfragen scheinen nicht zu funktionieren. Warum arbeiten sie nicht? CSS Lint sagt, es gibt einige Probleme CSS Lint Warum funktionieren meine Medienabfragen nicht?

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 
}

Quelle

2016-04-08 Taras Ivanitsky

Dies sieht wie Sass (SCSS) statt CSS. – Moob

Medienanfragen enthalten Selektoren Gruppen, nicht umgekehrt.

Sie benötigen CSS zu ändern, wie so:

.l-fg3 > div { 
    ... 
} 

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

Quelle

2016-04-08 15:01:58

Sie haben Recht, aber ich denke, das Hauptproblem ist, dass das OP SCSS und nicht CSS gepostet hat. – Moob

Wenn Sie Fehler in einem CSS-Block haben, wird der gesamte Block Verarbeitung zu stoppen. Der CSS Lint sagt Ihnen genau, was die Probleme sind. Zum Beispiel:

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

Quelle

2016-04-08 15:05:57

Dies ist SCSS. Es sieht aus wie es einmal CSS kompiliert funktioniert:

(Außerdem müssen Sie zwischen den Werten in Ihren calc() Funktionen, einen Raum setzen.)

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

ich es habe als Codepen, so können Sie zwischen vorverarbeitet (weniger/Sass/etc) und Vanille CSS: http://codepen.io/anon/pen/dMJqOz

Quelle

2016-04-08 15:10:23 Moob

Okay, ich habe dich. Jetzt habe ich ein anderes Problem: @ Medien Bildschirm und (min-Breite: 600px) { .l-fg3> div { Marge: 10px; Flex-Basis: 31%; } } @ Medien Bildschirm und (min-Breite: 600px) { .featured { flex-Basis: 43%; } } Meine featured Divs wollen nicht 43% sein, sie bleiben gleich - 31%. Wie kann ich es lösen? –

Klingt wie ein Fall von [Spezifität] (https://developer.mozilla.org/en/docs/Web/CSS/Specificity). Die beiden Selektoren konkurrieren und in diesem Fall übertrumpft der erste den zweiten. Versuchen Sie, mit Ihrem Selektor * spezifischer * zu sein, zB: '.l-fg3> div.featured {flex-basis: 43%; } ' – Moob

Ja, das stimmt. Vielen Dank! –

Warum funktionieren meine Medienabfragen nicht?

Antwort

Verwandte Themen