目录
一、概述
在PC端,视口是指浏览器的可视区域。在移动端,视口(viewport)分为三种,其一布局视口,其二视觉视口,其三理想视口。视口单位是CSS3新引入的概念,其中的视口是指PC端浏览器的可视区域和移动端的布局视口。视口单位如下所示。
(1) vw 相对于视口的宽度, 视口宽度是100vw, 1vw = 视口宽度的1%
(2) vh 相对于视口的高度, 视口高度是100vh, 1vh = 视口高度的1%
(3) vmin 选取视口宽度和高度中最小的那个
(4) vmax 选取视口宽度和高度中最大的那个
// 如果视口宽度 > 视口高度
1vmin = 1vh
1vmax = 1vw
// 如果视口高度 > 视口宽度
1vmin = 1vw
1vmax = 1vh
宽度和高度自动适应,再加上rem布局的字体适应,可以完美解决各种屏幕适配问题。rem布局原理:根据CSS媒体查询功能,更改根标签字体尺寸,实现rem单位随屏幕尺寸的变化。