CSS - width

The width CSS descriptor is shorthand for setting both the min-width and the max-width 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.

Syntax  

CSS
/* 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 syntax

CSS
auto <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/length"><length></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a>

Description  

The width CSS descriptor is shorthand for setting both the min-width and the max-width 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.

Related at-rule@viewport
Initial valueas each of the properties of the shorthand:
Percentagesas each of the properties of the shorthand:
  • min-width: refer to the width of the containing block
  • max-width: refer to the width of the containing block
Mediavisual, continuous
Computed valueas each of the properties of the shorthand:
  • min-width: the percentage as specified or the absolute length
  • max-width: the percentage as specified or the absolute length or none
Canonical orderorder of appearance in the formal grammar of the values

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 29 (behind a flag) Not supported 10 -ms 11.10
Removed in 15
Reintroduced behind a flag in 16
Not supported
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support
4.4
29
Not supported 10-ms 11.10
Removed in 15
Reintroduced behind a flag in 16
Not supported

 

Specifications  

Specification Status Comment
CSS Device Adaptation
The definition of '"min-width" descriptor' in that specification.
Working Draft Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/@viewport/width

Beginner CSS Reference