width CSS-Media-Feature

Das width CSS Media-Feature kann verwendet werden, um die Breite des Viewports (oder des Seitenbereichs für paginierte Medien) zu testen.

Syntax

Das width-Feature wird als <length>-Wert angegeben, der die Breite des Viewports darstellt. Es handelt sich um ein Bereichs-Feature, d.h. es können auch die vorangestellten Varianten min-width und max-width verwendet werden, um Mindest- bzw. Höchstwerte abzufragen.

Beispiele

HTML

<div>Watch this element as you resize your viewport's width.</div>

CSS

/* Exact width */
@media (width: 360px) {
 div {
 color: red;
 }
}
/* Minimum width */
@media (min-width: 35rem) {
 div {
 background: yellow;
 }
}
/* Maximum width */
@media (max-width: 50rem) {
 div {
 border: 2px solid blue;
 }
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung von Media Queries
• @media