px、vh、vw、rem

1. px、vh、vw、rem

一、介绍
   传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性
   从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位
   利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等
  
 二、单位
  
 html {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */
   这样页面中1rem=10px、1.2rem=12px、1.4rem=14px、1.6rem=16px;使得视觉、使用、书写都得到了极大的帮助
  
 特点：
   1、rem单位可谓集相对大小和绝对大小的优点于一身
   2、和em不同的是rem总是相对于根元素，而不像em一样使用级联的方式来计算尺寸
  
 特点：
   1.em 的值并不是固定的
   2.em 会继承父级元素的字体大小
   3.em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
   4.任意浏览器的默认字体高都是 16px
  
 三、总结
   px：绝对单位，页面按精确像素展示
   em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算， 整个页面内1em不是一个固定的值
   rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算
   vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单

2. css单位 px，百分比，rem，em，vw和vh 区分

  有两种类型的长度单位：相对和绝对 
    px就是pixel（像素）的缩写，绝对单位，相对长度单位，相对于屏幕分辨率。 
    em是相对单位 ，参考物是 父元素 的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。
    rem是CSS3新增的一个相对单位 ，但相对的只是HTML根元素 font-size。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
   rem在移动端应用可参考淘宝的页面 http://m.taobao.com 或者苏宁的页面 https://m.suning.com/    不是每个地方都要用rem，rem只适用于固定尺寸
    页面基准750px;html font-size值的计算： 
    前端行业做移动端会普遍默认用rem或em,是因为可以通过js控制根元素(或者用@media)来达到适配各种分辨率的字体大小的效果 
    % 百分比，相对长度单位，相对于父元素的百分比值     相对单位参考如下 
                                                                                   使用相对尺寸单位计量，则在调整页面的布局的时候，不需要遍历所有的内部DOM结构，重新设置内部子元素的尺寸大小。如果是随着父容器或者是整体页面布局而改变尺寸，则使用%更好，如元素的高度和宽度设置。
    vm、vh、vmin、vmax是一种视窗单位，也是相对单位 。主要用于页面视口大小布局，相对于rem在页面布局上更加方便简单。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。
   具体描述如下：   vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）   vh：视窗高度的百分比   vmin：取当前Vw和Vh中较小的那一个值   vmax：取当前Vw和Vh中较大的那一个值    vh和vw相对于视口的高度和宽度 ， 1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度 比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px， 很容易实现与同屏幕等高的框。