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).

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

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+