Verschachtelung von @media-Regeln in CSS
Die Unterstützung scheint zwischen den Browsern unterschiedlich zu sein.
Überprüf denVerknüpfung
Firefox: Schwarz mit weißem Text.
Opera, Chrome, IE9: Blau mit schwarzem Text.
Welches ist richtig und wie würde ich es konsistent machen?
Der Code
@media screen and (min-width: 480px) {
body{
background-color:#6aa6cc;
color:#000;
}
@media screen and (min-width: 768px) {
body{
background-color:#000;
color:#fff;
}
}
}
Interessanterweise scheint es, dass das Verschachteln von Medienabfragen innerhalb einer Bedingung erfolgt@import
scheint zu funktionieren.
z.B:
Index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Media test</title>
<link rel="stylesheet" type="text/css" href="importer.css" />
</head>
<body>
<h1>Why is this not consistent.</h1>
</body>
</html>
importer.css@import url(media.css) screen and (min-width: 480px);
media.cssbody {
background-color: #6aa6cc;
color: #000;
}
@media screen and (min-width:768px) {
body {
background-color: #000;
color: #fff;
}
}