在线文档教程
CSS

宽度 | @viewport.width

@viewport.width

widthCSS描述符是用于设定两个最小宽度和视口的最大宽度的简写。通过提供一个视口长度值,该值将确定所提供的值的最小宽度和最大宽度。

如果提供两个视口值,则第一个值将设置为最小宽度,第二个值将设置为最大宽度。

Related at-rule@viewport
初始值as each of the properties of the shorthand: min-width: 0 max-width: none
百分比值as 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
适用媒体visual, continuous
计算值as 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
正规顺序order of appearance in the formal grammar of the values

  • min-width0

  • max-widthnone

Percentages as each of the properties of the shorthand:

  • min-width:参考包含块的宽度

  • max-width:参考包含块的宽度

Media visual, continuous [Computed value](../computed_value) as each of the properties of the shorthand:

  • min-width:指定的百分比或绝对长度

  • max-width:指定的百分比或绝对长度或none

Canonical order order of appearance in the formal grammar of the values

语法

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

auto使用的值是从其他CSS描述符的值中计算出来的。

正式语法

auto | <length> | <percentage>

规范

SpecificationStatusComment
CSS Device AdaptationThe definition of '"min-width" descriptor' in that specification.Working DraftInitial definition

浏览器兼容性

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support29 (behind a flag)No support10 -ms11.10 Removed in 15 Reintroduced behind a flag in 16No support

FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.44.42929No support10-ms