首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

宽度 | @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
代码语言:txt
复制
Percentages as each of the properties of the shorthand:
  • min-width:参考包含块的宽度
  • max-width:参考包含块的宽度
代码语言:txt
复制
Media visual, continuous   [Computed value](../computed_value) as each of the properties of the shorthand:
  • min-width:指定的百分比或绝对长度
  • max-width:指定的百分比或绝对长度或none
代码语言:txt
复制
Canonical order order of appearance in the formal grammar of the values  

语法

代码语言:javascript
复制
/* An example with one viewport value: */
@viewport {
    width: 320px;
}

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

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

<length>非负的绝对或相对长度。

<percentage>相对于初始视口宽度或高度的缩放因子1.0的百分比值,分别为水平和垂直长度。必须是非负的。

正式语法

代码语言:javascript
复制
auto | <length> | <percentage>

规范

Specification

Status

Comment

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

Working Draft

Initial definition

浏览器兼容性

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

29 (behind a flag)

No support

10 -ms

11.10 Removed in 15 Reintroduced behind a flag in 16

No support

Feature

Android

Chrome for Android

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

4.4

4.4

29

29

No support

10-ms

11.10 Removed in 15 Reintroduced behind a flag in 16

No support

扫码关注腾讯云开发者

领取腾讯云代金券