CSS - width

width is a CSS media feature that can be used to apply styles conditionally based on the width of the viewport. The width must be specified as a <length> value.</length>

Syntax  

width is a range value meaning the prefixed min-width and max-width are also available.

CSS
/* Exact width */
@media (width: 300px) {}

/* Viewport width at least */
@media (min-width: 50em) {}

/* Viewport width at most */
@media (max-width: 1000px) {}

Description  

width is a CSS media feature that can be used to apply styles conditionally based on the width of the viewport. The width must be specified as a <length> value.</length>

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) 9 (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

Specifications  

Specification Status Comment
Media Queries Level 4
The definition of '@media' in that specification.
Working Draft No change.
Media Queries
The definition of 'width' in that specification.
Recommendation 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/@media/width

CSS NeedsBrowserCompatibility NeedsExample Reference Référence