css3新单位vw、vh、vmin、vmax该怎么用?

2018-10-04CSS620
  • 详情内容
  • 留言点评

css样式中表示大小和宽高的单位主要有px pt em ex ch rem vw vh vmin vmax cm mm in pc %等十多种,按照各自特点大致可分为“绝对单位”、“相对单位”和“百分比单位”。

绝对单位:px in cm mm,分别代表像素、英寸、厘米、毫米,通常情况下1in=2.54cm=25.4mm=72pt=6pc=96px;

相对单位:em rem  pt pc ex ch,分别代表相对字号、根字号(JS实现移动端适配字体根字号rem)、磅(1pt=1/72in)、派卡12点活字 (1pc=12pt)、字号半高、数字0宽,后3种一般不常用;

百分比单位:vw vh vmin vmax %,分别代表可视窗口宽(1vw=1/100窗宽)、可视窗口高(1vh=1/100窗高)、视窗宽高相对较小值、视窗宽高相对较大值、百分比,此类单位在移动端响应式布局中越来越常用;

今天益吾库主要和大家分享一下vw、vh、vmin、vmax这几种css3中的新单位知识,它们都是百分比单位,其中vmin、vmax是由非标准单位vm进化而来。vh等于网页浏览器可视窗口(viewport)高度的1/100。例如,如果浏览器的高是900px,1vh求得的值为9px。同理,如果显示窗口宽度为750px,1vw求得的值为7.5px。下面我们来做详细介绍:

1,vw、vh、vmin、vmax具体含义

(1)vw、vh、vmin、vmax都是视窗单位,既是相对单位也是类百分比单位。它相对的不是父节点或者页面的根节点,而是由视窗(Viewport)大小来决定的,单位1,代表类似于 1%。视窗(Viewport)是你的浏览器实际显示内容的区域,换句话说就是浏览器显示网页的区域。

(2)具体描述如下:

vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)

vh:视窗高度的百分比

vmin:当前 vw 和 vh 中较小的一个值

vmax:当前 vw 和 vh 中较大的一个值

2,vw、vh 与 % 百分比的区别

(1)% 是相对于父元素的大小设定的比率,vw、vh 是视窗大小决定的。

(2)vw、vh 优势在于能够直接获取高度,而用 % 在没有设置 body 高度的情况下,将无法正确获得可视区域的高度,所以这是一种不错的优势。

3,vmin、vmax 用处

做移动页面开发时,如果使用 vw、wh 设置字体大小(比如2vw),在竖屏和横屏状态下显示的字体大小是不一样的。

由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax,使得文字大小在横竖屏下保持一致。

4,浏览器兼容性

(1)桌面 PC

Chrome:自 26 版起就完美支持(2013年2月)

Firefox:自 19 版起就完美支持(2013年1月)

Safari:自 6.1 版起就完美支持(2013年10月)

Opera:自 15 版起就完美支持(2013年7月)

IE:自 IE10 起(包括 Edge)到现在还只是部分支持(不支持 vmax,同时 vm 代替 vmin)

(2)移动设备

Android:自 4.4 版起就完美支持(2013年12月)

iOS:自 iOS8 版起就完美支持(2014年9月)

1210235-20170918162831821-1344168854.jpg

欢迎点评!也可以是问题反馈和建议

支持Ctrl+Enter提交
暂无留言,快抢沙发!
0

真心很赞,必须打赏!嗯,以资鼓励~

点此打赏

99%看过的人还会看