html 自适应单位vw,CSS3响应式自适应尺寸视窗单位vw、vh详解

vw、vh、vmin、vmax是CSS3新增的视窗单位,同时也是相对单位,它相对视窗(Viewport)大小的百分比。

什么是视窗?

视窗即Viewport,是浏览器实际显示内容的区域,不包括工具栏、地址栏、书签栏。

视窗单位说明

vw - 视窗宽度的百分比,如1vw即浏览器可视窗口宽度的1%,10vw即窗口宽高的10%

vh - 视窗高度的百分比,如1vh即浏览器可视窗口高度的1%,10vh即窗口高度的10%

vmin - 选择当前 vw 和 vh 中的最小值,最小值被均分为100单位的vmin

vmax - 选择当前 vw 和 vh 中的最大值,最大值被均分为100单位的vmax

示例:

1、vw、vh

浏览器可视窗口宽度1920px,可视窗口高度960px,那么

10vw = 1920 * 10% = 192px

10vh = 960 * 10% = 96px

2、vmin、vmax

CSS代码

h1 {

font-size:1vmax;

}

h2 {

font-size:1vmin;

}

h1:1vmax = 1920 * 1 / 100 = 19.2px

h2:2vmin = 960 * 1 / 100 = 9.6px

意义:

做移动页面开发时,如果使用 vw、wh 设置字体大小会导致字体在手机竖屏和横屏下显示的大小不一样,而由于 vmin 和 vmax 分别是取当前vw、vh中最小的值或最大的值,就可以使得文字大小在横竖屏下保持一致。

除了字体大小,还可以应用在宽度的尺寸上,实现元素的响应式自适应化处理。

浏览器兼容性

PC端浏览器

2013年2月:Chrome 26版本起完美支持

2013年1月:Firefox 19版本起完美支持

2013年10月:Safari 6.1版本起完美支持

2013年7月:Opera 15版本起完美支持

坑货IE10 ~ Edge版本部分支持,不支持 vmax,同时 vm 代替 vmin

移动端浏览器

2013年12月:Android 4.4版本起完美支持

2014年9月:IOS8版本起完美支持

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值