@viewport.width

The width CSS descriptor is shorthand for setting both the min-width and the max-width descriptors of the viewport. By providing one viewport length value, that value will determine both the min-width and the max-width to the value provided.

If two viewport values are provided the first value will be set to the min-width and the second value will be set max-width.

Syntax

/* An example with one viewport value: */
@viewport {
    width: 320px;
}

/* An example with two viewport values: */
@viewport {
    width: 320px, 120px;
}

Values

auto

The used value is calculated from the other CSS descriptors' values.

<length>

A non-negative absolute or relative length.

<percentage>

A percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively. Must be non-negative.

Formal definition

Formal syntax

<viewport-length>{1,2}
where 
<viewport-length> = auto | <length-percentage>
where 
<length-percentage> = <length> | <percentage>

Examples

Setting minimum and maximum width

@viewport {
  width: 500px;
}

Specifications

Browser compatibilityUpdate compatibility data on GitHub

See also

• @viewport