关于制作移动端web所必须了解的——手机适配（先将rem）

时代在变更，科技在升级。
很多时候，你会发现，你现在所用的知识可能是好多年前的了。为什么你不肯更新新技术？
原因很多：
1、用惯了老方法，新东西上手需要时间，项目又赶。——为什么项目后不去了解？
2、没有去关注——走科技路线的话，不望向远方，是想置身谷底？
3、…

今天，从熟悉的rem开始转向新学的vw。
在新的开始前，为旧的事物进行一个总结：
首先，什么是rem：
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

所谓依赖根元素来计算的方式，在实际运用时，我们一般先给予html元素一个font-size，然后我们所有的rem就根据这个font-size来计算
比如

html{ font-size:16px;}

那么（一般默认浏览器的font-size为16px）
1rem = 16px 所以，当你的设计图，宽高为1600px和800px；那么使用rem则成为：100rem，和50rem。

但是，这样不方便我们px和rem的换算，假设1rem=10px，那么100px=10rem，25px=0.25rem。这样就好换算很多，那么html {font-size: 62.5%; /10 ÷ 16 × 100% = 62.5%/}
同理html {font-size: 625%; /100 ÷ 16 × 100% = 625%/}
我在网上找了一张图片

在具体的使用，比如我们现在所说的手机适配：

一般可以采用js提前写html的font-size(也是比较稳妥的方式，毕竟浏览器不同，导致的font-size不同，外加上一般都要引入reset.css重置样式表)：

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      if(clientWidth>=640){
        docEl.style.fontSize = '100px';
      }else{
        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
      }
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

此代码选640px为基准值，为什么选640呢，

640px的页面宽度是一个安全的最大宽度，保证了移动端页面两边不会留白。注意这里的px是css逻辑像素，与设备的物理像素是有区别的。如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而它的CSS逻辑像素数为320 x 568px。
所以当要切移动端的页面的时候，需要把效果图宽度等比例缩放到640px。

比如当页面中某一div的宽度为60，高度为65的时候，就可以直接这样写样式：

{
  width:0.6rem;
  height:0.65rem
}

笔记本要没电了，先至此