width
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Das width CSS Medienmerkmal kann verwendet werden, um die Breite des Viewports (oder des Seitenkastens, bei seitengestützten Medien) zu testen.
Syntax
Das width-Merkmal wird als ein <length>-Wert angegeben, der die Breite des Viewports darstellt. Es handelt sich um ein Bereichsmerkmal, was bedeutet, dass Sie auch die Präfixvarianten min-width und max-width verwenden können, um Mindest- bzw. Höchstwerte abzufragen.
Beispiele
HTML
html
<div>Watch this element as you resize your viewport's width.</div> CSS
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
| Specification |
|---|
| Media Queries Level 4 # width |