@media Abfragen in CSS

Question

Ich habe das folgende CSS, um den Seiteninhalt in verschiedenen Browsergrößen anzupassen. Aus irgendeinem Grund mag es die erste @ media-Anweisung nicht, anders gesagt, irgendetwas darin zu ändern, macht nichts mit dem Layout. Ich verwende http://quirktools.com/screenfly/, um das Layout zu überprüfen.
Ändern der Reihenfolge der Anweisungen wird auch Dinge vermasseln. Ich

verloren

Ihre Hilfe sehr

Dank geschätzt

@media (min-width: 500px) and (max-width: 820px) { 
CSS HERE 
} 
@media (min-width: 830px) and (max-width: 1025px) { 
CSS HERE 
} 
@media (min-width: 1026px) and (max-width: 1580px) { 
CSS HERE 
} 
@media (min-width: 1590px) and (max-width: 2000px) { 
CSS HERE 
} 

Answer 1

Zuerst möchten Sie eine Bildschirmgröße für etwas größer als definieren, von dort aus machen Sie Ihre Medienabfragen für die Größen dazwischen.

Hier ist ein Beispiel.

/* Large desktop */ 
@media only screen and (min-width :75.000em) { 
    .test { 
     display: none; 
    } 
} 

/* Portrait tablet to landscape and desktop */ 
@media only screen and (min-width :61.250em) and (max-width:74.938em) { 
    .test { 
     display: block; 
     color: #FF0; 
    } 
} 

/* Portrait tablet to landscape and desktop */ 
@media only screen and (min-width :48.000em) and (max-width:61.188em) { 
    .test { 
     display: none; 
    } 
} 

/* Landscape phone to portrait tablet */ 
@media only screen and (min-width :30.063em) and (max-width :47.938em) { 
    .test { 
     display: none; 
    } 
} 

/* portrait phones and down */ 
@media only screen and (max-width :30.000em) { 
    .test { 
     display: block; 
     color: #FF0; 
    } 
} 

Answer 2

Sie benötigen eine erste zu setzen, zu sagen „etwas kleiner als (max-width: 829px), tun dieses“

Für Beispiel:

@media (max-width: 829px) { 
.bg {background-color:blue;} 
} 
@media (min-width: 830px) and (max-width: 1025px) { 
.bg {background-color:red;} 
} 
@media (min-width: 1026px) and (max-width: 1580px) { 
.bg {background-color:green;} 
} 
@media (min-width: 1590px) and (max-width: 2000px) { 
.bg {background-color:yellow;} 
} 

Sehen Sie es in dieser Plunker - Ich habe die Klasse bg dem Körper hinzugefügt, damit Sie sehen, dass der Hintergrund die Farbe ändert, wenn Sie die Rahmenbreite ändern.

Sie können Ihre Anfragen vereinfachen, indem sie sagen:

@media (max-width: 829px) { 
.bg {background-color:blue;} 
} 
@media (min-width: 830px){ 
.bg {background-color:red;} 
} 
@media (min-width: 1026px) { 
.bg {background-color:green;} 
} 
@media (min-width: 1590px) { 
.bg {background-color:yellow;} 
} 

Answer 3

<meta name="viewport" content="width=device-width initial-scale=1" /> 

Fügen Sie obigen Code in HTML-Medien Abfrage auszuführen.