移动端布局的方式总结

移动端布局的5种方式

• 1.固定meta视图

<meta name="viewport" content="width=750px,user-scalable=no">

这种写法中，利用meta标签，将视图宽度定位了750px，固定值，也就是ios6的标准，然后css也是基于750px的设计稿进行布局

优点：前端开发十分快速，都是死值

缺点：匹配不完全，手机像素高于这个的，显示这个效果，不理想状态；低于这个状态的，不兼容这个状态；

固定宽在做项目的时候由于每个手机屏幕的高度不同需要有一个最小的内容区域

• 2.rem布局

rem是一种基于页面根元素的布局方式

当手机屏幕大小改变了，只要改变对应的页面根元素，就可以实现页面的缩小放大。

按照750px的设计稿，进行布局的时候 可以在head中添加下图的一段j，监听屏幕改变，从而动态改变页面根元素的fonsize大小，对页面进行缩放改变

换句话说 设置根元素 fontsize=16px 那么 1rem=