页面适配
移动端的页面适配是前端开发中老生常谈的问题了，随着系统和设备的更新迭代，现在我们只需要在页面的头部设置viewport适配代码。
js
//viewport适配代码
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimum-sacle=1.0,manimum-sacle=1.0">然后结合flex弹性布局，基本上大部分页面我们都可以适配。这部分代码很长，我们不需要记忆。
就算我们设置了viewport，不同手机的像素差异还是蛮大的。目前市面上的手机最小尺寸也有320px，这种情况下我们使用px机器布局就不行了，我们需要一种随屏幕宽度变化而变化的相对单位，去做到真正的适配。
而现在rem方案其可靠性已经得到业内的广泛认可。在这里我们也推荐rem的方案
- rem
js
html{font-size:10px;}
/**此时屏幕宽度=64rem */
var html = document.documentElement;
var rootSize = html.clientWidth / 640*10;
html.style.fontSize = rootSize + 'px';这种做法多多少少需要写一些js，随着我们规范的推广和手机系统的更新，现在不需要写这么多代码了，直接使用CSS就可以实现了。
- vw
vw能够将我们的屏幕单位设置为1，
屏幕宽度=1vw
100vw = 64rem
1rem = 1.5625vw
在开发时我们需要将字号矫正到15.625vw，
js
html{font-size:15.625vw}
<div style="width: 3.2rem;height:3.2rem;">