width
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
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
| Spezifikation |
|---|
| Media Queries Level 4 # width |