width
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Please take two minutes to fill out our short survey.
Die width-CSS-Medienfunktion kann verwendet werden, um die Breite des Viewports (oder der Seitenbox, für seitengestützte Medien) zu prüfen.
Syntax
Die width-Funktion wird als <length>-Wert angegeben, der die Breite des Viewports darstellt. Es handelt sich um eine Bereichsfunktion, was bedeutet, dass Sie auch die Präfix-Varianten min-width und max-width verwenden können, um jeweils nach Mindest- und Höchstwerten zu fragen.
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 |