最近做了一个针对微信移动端的项目，在开发中遇到了不少的坑，学到了也不少，发现有许多地方值得写一下，以供做web移动端同学参考参考。
一、单位
说到移动端，不得不提适配问题，大大小小的移动设备不但让做android和ios的难过，因为设备大小和浏览器的差异，现在也让前端开始头疼了，不过，方法总是比问题多，我们是革命的队伍，遇到问题就要上！
因为现如今市面上移动设备的分辨率大小不同，显然咱们常用的px单位在这个时候就有些不太灵光了，为此，css3出了一个新单位——rem，rem是移动端神器，它完美解决了分辨率的适配问题。
rem就是相对于根元素<html>的font-size来做计算,举个栗子：
如图这样，一个宽高各100px的box就出现了，很简单吧，发现没，有些像我们以前常用的em，不过rem是相对于根元素(<html>)的字体大小，em相对 于父元素的字体大小。
虽然很简单，但是移动设备那么多，我们又怎么根据手机屏幕的分辨率不同，去设置<html>的字体大小呢？
我知道的方法有2个：
1）通过css媒体查询
如图所示，通过媒体查询的方式，只需要把常用的屏幕宽度考虑进去即可，能够满足大部分应用场景，不过这一做法不够严谨，处女座的你，怎么能满足呢？那就用js去设置fontSize吧！
2）通过js计算
通过js设备的屏幕分辨率，可以计算出相应的字体的大小，这个方法可以适配所有屏幕的大小，这下就完美许多了。
不过有些时候会很麻烦，因为rem会涉及到换算的问题，比如70px的宽，根目录字体是12px,那换算公式为：70/12 = 5.83333333~，每次写一个单位都要用计算器去算，想想就泪崩了，不过作为程序猿，怎么能让人去做这种事，这工作可以让Less或者Sass等预处理器去完成。
二、使用<meta>标签中的viewport布局
有了rem单位还不够，得再加上viewport，有了这个东西，麻麻再也不用担心我的移动端适配问题了，话不多说，直接上图
红圈圈的必须要，有了这个<meta>标签，页面就有那么点意思了。
三、弹性布局盒子布局
以前PC端布局方式通常会使用float、margin、padding等方式布局，这些方法不仅有繁琐的计算，而且在移动端还容易出错。现在移动端，有更好的选择，使用flexbox布局方式。举个栗子：用flex做tab
html代码：
css代码：
