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.
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
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;
}
}
Result
Especificaciones
Specification |
---|
Media Queries Level 4 # width |
Compatibilidad con navegadores
BCD tables only load in the browser