El width
CSS @media
media caracteristica puede ser usada para aplicar estilos basados en el ancho de el viewport (o la caja de la pagina, para paged media).
Syntax
La característica width
es especificada como <length>
valor que representa el ancho de la ventana gráfica. Es una función de rango, lo que significa que también puede usar el prefijo min-width
and max-width
variantes para consultar valores mínimos y máximos, respectivamente.
Example
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;
}
}
Result
Specificaciones
Specification | Status | Comment |
---|---|---|
Media Queries Level 4 La definición de 'width' en esta especificación. |
Candidate Recommendation | The value can now be negative, in which case it computes to false. |
Media Queries La definición de 'width' en esta especificación. |
Recommendation | Initial definition. The value must be nonnegative. |
Navegadores Compatibles
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Feature | Chrome |
Firefox (Gecko) |
Internet Explorer | Edge | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | 9.0 | 14+ | (Yes) | (Yes) |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 56+ | ? | ? | ? | 9.3+ |