前言
以前用px 单位比较多，到后来的em rem vh vw,今天就来总结下各种单位的使用效果。
总有一天，你的努力会得到收获,共勉。
在介绍下面这些单位的时候，我们先来聊聊这个内容
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
</head>
</html>
那么，它有什么作用呢？？
viewport用于设置移动端自适应——
但如果是浏览流动布局的网页那情况会非常糟糕，设想一个宽 度为30%的侧边栏对于320px[手机屏幕]而言也就96px，只能容纳8个12px的汉字，可阅读性非常差。
为了让手机也能获得良好的网页浏览体验，Apple找到了一个办法：在移动版(iOS)的Safari中定义了viewport meta标签，它的作用就是创建一个虚拟的窗口(viewport)，而且这个虚拟窗口的分辨率接近于桌面显示器*
image.png
rem
rem
rem是css3中新增加的一个单位属性
相对长度单位，相对于根元素(即html元素)计算值的倍数。
设置html 的值为 62.5%
1rem = 10px;
在桌面浏览器上 font-size 的默认值是16px;
可知 font-size: 62.5%; 即表示10px （通过计算 16 * 62.5% = 10px）
那么 font-size: 62.5%; 和 font-size: 10px; 的区别在什么地方呢？
解释：
桌面浏览器默认页面字体大小是16px，这种情况下设置成具体像素大小或者对应的百分比，
看起来的效果是一样的；
但是其他类型的设备的默认字体大小不一定是16px，
特别是高分辨率的设备，16px大小的字体在它们上面看起来会非常小，所以不能在body上设置具体像素值，
设置成百分比，可以按照设备的基准字体大小给编写的网页设置好最适合用户浏览的字体大小。
正确使用rem 的姿势！！
html{
font-size:625%;
}
换算：1rem = 100px;
rem em区别:
em:也是一个相对单位，它是根据父节点来设置font-size。
rem:是根据根节点(html)来设置font-size 。
接下来聊聊vh vw....
****视口单位(Viewport units)****
什么是视口？
在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。
视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。
根据CSS3规范，视口单位主要包括以下4个：
1.vw：1vw等于视口宽度的1%。
2.vh：1vh等于视口高度的1%。
3.vmin：选取vw和vh中最小的那个。
4.vmax：选取vw和vh中最大的那个。
vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。
比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。
vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。
vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。
image
image
网友评论