width

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 (en-US)).

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

BCD tables only load in the browser