CSS参考手册
设备适配 | Device Adaptation
@viewport
@viewport
在规则中包含一组嵌套描述符,在由花括号限定的CSS块。这些描述符控制视口设置,主要在移动设备上。
@viewport {
width: device-width;
}
语法
一个缩放因子的1.0
或100%
不对应任何缩放。较大的值会放大。较小的值会缩小。
描述符
浏览器会忽略不可识别的描述符。
min-width
第一次显示文档时用于确定视口的宽度。
max-width
第一次显示文档时用于确定视口的宽度。
width
用于设置两者的简写描述符min-width
,max-widthmin-height
用于在第一次显示文档时确定视口的高度。
max-height
在第一次显示文档时用于确定视口的高度。
height
用于设置两者的简写描述符min-height
并max-heightzoom
设置初始缩放因子。
min-zoom
设置最小缩放系数。
max-zoom
设置最大变焦倍数。
user-zoom
控制用户是否应该能够更改缩放比例。
orientation
控制文件的方向。
正式语法
@viewport {
<group-rule-body>
}
示例
@viewport {
min-width: 640px;
max-width: 800px;
}
@viewport {
zoom: 0.75;
min-zoom: 0.5;
max-zoom: 0.9;
}
@viewport {
orientation: landscape;
}
规范
Specification |
Status |
Comment |
---|---|---|
CSS Device AdaptationThe definition of '@viewport' in that specification. |
Working Draft |
Initial definition |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic support |
29 (behind a flag) 4 |
(Yes) |
No support 2 |
10 -ms |
11.10 Removed in 15 Reintroduced behind a flag in 16 |
No support 3 |
Feature |
Android |
Chrome for Android |
Edge |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support |
4.4 |
29 |
(Yes) |
No support 2 |
10-ms1 |
11.10 Removed in 15 Reintroduced behind a flag in 16 |
No support 3 |
设备适配 | Device Adaptation相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。