移动端适配问题

移动端适配这一块，有好多种方案。

1. viewport + rem：

2. viewport + vw

3. js动态设置： 参考文章

一般来说，用下面的这个viewport:

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/>

width=device-width：设置布局视口的大小等于设备独立像素；
initial-scale=1.0：设置布局视口和视觉视口的大小等于设备独立像素；
user-scalable=no：不允许用户进行缩放；
minimum-scale和maximum-scale 分别这只最小的缩放为1.0，最大的缩放为1.0，表示不允许用户进行缩放操作。

但是有几个原则要考虑一下：

1. 字体使用px

2. 限制根元素的大小

3. 使用sass中的function做到单位变换

参考资料：

• 浅谈移动端三大viewport

• 移动端适配问题

• flexible.js 布局详解

• amfe-flexible