Benutzerdefinierte Bedingungen für CSS-Medienabfragen

Question

Ich möchte einige CSS-Eigenschaften eines Elements basierend auf der Breite seines übergeordneten Elements für Responsive Design ändern.

Zum Beispiel

Das Mutterelement wird eine minimale Breite von 200 Pixel haben und wird bei max 500 Pixeln, unabhängig von der Bildschirmgröße/Breite dehnen. Ich möchte eine feste Breite für seine untergeordneten Elemente basierend auf der Breite des übergeordneten Containers festlegen.

Ich suche keine Javascript-Lösung dafür. +1, wenn es irgendwie mit einer benutzerdefinierten Medienabfrage implementiert werden kann.

Bitte beraten.

Answer 1

Verwendung Medien Abfrage

@media only screen and (min-width : 200px) { 

} 

@media only screen and (min-width : 500px) { 

} 

Answer 2

Versuchen Sie es einmal

@media screen and (min-width: 200px) and (max-width: 499px) { 
    //styles here  
} 

@media screen and (min-width: 500px) and (max-width: 1024) { 
    //styles here 
}