rem、px、em实践中用法

  1.CSS中单位非常多，px、rem、%应该是用的最多的，em要慎用，最近还看到vw、vh。
   在实践过程中，使用rem,一定要记得结合html元素，设置font-size；

html{
  font-size:12px;
}

   如果你不写，你会发现在谷歌和IE浏览器下，你的布局大部分都乱了。因为谷歌默认的是16px,而IE8是12。所以有时候需要你自己做统一。（今天画页面就遇到了这个问题，但是是IE11，我也不太清楚是哪里我设置出了问题，IE11的rem值为12了，所以最好还是设计的时候直接统一，节省很多事情）。谷歌默认最小字体是12px,设置再小，也只会显示为12px的大小。
   我最近画页面，也看到一些文章对这些单位的总结，所以自己也整合一下思路。
   ★在视觉上需要固定尺寸的，使用px。比如我们经常画1px的线，5px的圆角边框。
   ★在大多数间距、字号上使用rem。
   ★em一般要慎用。（跟它的计算方式有关）
   ★%使用场景就比较固定，它是参考父级容器，一般写多少比多少的布局情况下会使用。
   ★vm、vh是参考视口。1vm=1%视口，当需要匹配视口大小的时候，再使用。
   慎用em，完全是由于它的计算原理，它是根据当前元素的字号比例计算的。

span { 
    font-size:1.5rem;
}

//html
<span>
       abc
       <span>def</span>
       abc
<span>

外层span字号是16px(浏览器默认值)，所以1.5em之后就是24px；由于字号是继承的，导致里层span继承24px,并且要1.5X24px=36px;
   对于rem使用，我们布局的时候使用margin、padding等距离设置，然后我们有设置html{font-size:16px;},假设我们是根据宽度为1000px的稿子来设计的，当我们要适配其他的任意宽度的屏幕的时候，我们可以直接计算font-szie为多少来修改，可以减少很多代码量。比如说适配500的屏幕，fontsize=devicewidth*16/1000=8px;那么可以这样写

@media(min-width:500px){
    font-size:8px;
}

使用这个之前html上一定要设置<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no">
为了手机用户更好的体验，我们甚至可以把font-size设置为百分比，比如62.5%；因为1/16=62.5%；这样手机用户改变手机设置也能改变字体大写。