在书写移动页面的时候，使用px单位会让页面的宽可高固定，不能满足所有移动设备，导致页面的混乱，对用户的体验不够好。为了解决这个问题，我们需要对移动页面进行适配。
适配的要求
- 在不同分辨率的手机上，页面看起来是自适应的。整体效果看起来比较和谐。不会说大屏幕上看起来特别小。小屏幕上看起来特别大
- 主要是关注字体，宽高，间距，图片大小等。
- 所提供的设计图一般是手机分辨率的两倍，才能方便做适配。
- 使用rem做单位，而不是传统的px
适配的方法，3个步骤
步骤1:
设置viewport，也就是平时写移动端页面都要加上的：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
步骤2:
首先我们在我们的页面引入下面的flexible.js， 这段适配的js代码是拿淘宝的来用的。 适配的js代码的github地址如下：https://github.com/amfe/lib- flexible/blob/master/src/flexible.js。
步骤3:
页面上我们的css代码可以这样写，比如设计图给我们的尺寸是750*1000的。某个容器在设计图的宽度是150px*225px,那我们在css里面
宽度：150px/750px/10=150px/75px=2rem; 高度为：225px/75px=3rem;
一句话：布局的时候，各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10；
div{
width: 2rem;
height: 3rem;
}
通过上面的3个步骤，我们就可以将我们的移动端页面做成适配的了。