移动端布局方式整理：
1.固定meta视图
metaname=viewportcontent=width=px,user-scalable=no
这种写法中，利用meta标签，将视图宽度定位了px，固定值，也就是ios6的标准，然后css也是基于px的设计稿进行布局
优点：前端开发十分快速，都是死值
缺点：匹配不完全，手机像素高于这个的，显示这个效果，不理想状态；低于这个状态的，不兼容这个状态；固定宽在做项目的时候由于每个手机屏幕的高度不同需要有一个最小的内容区域
2.rem布局
em：是一个相对单位，1em等于当前元素或父元素的font-size值。
1em==1个font-size的大小
rem：也是一个相对单位，1rem等于根元素的font-size值。
1rem==1个根元素的font-size大小就是1个html标签的font-size大小
rem-root+em
rem布局的原理：
页面中的元素采用rem作为尺寸或者间距的单位，只要想办法去动态改变html标签的font-size大小，这样就可以适配不同的设备进行等比缩放。
rem是一种基于页面根元素的布局方式
当手机屏幕大小改变了，只要改变对应的页面根元素，就可以实现页面的缩小放大。
按照px的设计稿，进行布局的时候可以在head中添加下图的一段js，监听屏幕改变，从而动态改变页面根元素的fonsize大小，对页面进行缩放改变
换句话说设置根元素fontsize=16px那么1rem=16px，所以根据屏幕大小而动态改变fontsize的值，从而做到移动端rem适配效果。
优点：引入js后，通过动态修改根元素fontsize,根据手机屏幕自动缩放
缺点：head中就要引入js，会有一点加载影响
3.流体布局
流布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同。固定宽度布局使用的是像素，但是流布局使用的是百分比，看到百分比，你应该想到，这将提供了很强的可塑性和流动性。换句话说，通过设置了百分比，你将不需要考虑设备尺寸或者屏幕宽度大小了，结论就是，你可以为每种情形找到一种可行的方案，因为你的设计尺寸将适应所有的设备尺寸。
4.响应式布局
响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重
优点：用一套代码可以在PC端、Pad端、手机端进行相应的适配，使更多用户能够看到信息展示。
缺点：由于使用一套代码实现，就有很大的局限性，通常用于小型企业。
CSS3媒体查询
即mediaqueries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局。也可以针对不同的分辨率设置不同的样式。
分辨率以上：PC端
~:padpro
~:padmini,mobile横屏
分辨率以下：mobile竖屏
媒体查询的语法