关于 rem em vh vw 单位详细解释！！
前言
以前用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% = 10 得到）
那么 font-size: 62.5%; 和 font-size: 10px; 的区别在什么地方呢？
解释：
桌面浏览器默认页面字体大小是16px，这种情况下设置成具体像素大小或者者对应的百分比，
看起来的效果是一样的；
但是其余类型的设施的默认字体大小不肯定是16px，
特别是高分辨率的设施，16px大小的字体在它们上面看起来会非常小，所以不能在body上设置具体像素值，
设置成百分比，可以按照设施的基准字体大小给编写的网页设置好最适合客户浏览的字体大小。
正确使用rem 的姿势！！
html{ font-size:625%;}换算：1rem = 100px;
rem em区别:
em:也是一个相对单位，它是根据父节点来设置font-s。
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
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 关于 rem em vh vw 单位详细解释！！
