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版本起完美支持
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章