移动端适配

适配要达到的效果无非就是“保证统一效果的页面等比例缩放”或者是“相对性的达到合理的展示（自适应布局）”
适配应关注的元素：字体、宽高间距、图像（图标、图片）
对于图像的处理，我经常使用的是用css将图片限定在元素内（作为背景图片），布局只针对元素进行布局。

下面介绍2种方案来对移动端进行适配：

• 固定高度，宽度自适应
  原理： viewport width设置成device-width；以较小宽度（320px）的视觉稿作为参照进行布局。垂直方向的高度和间距使用定值，水平方向混合使用定值和百分比或者利用弹性布局，最终实现“当手机屏幕变化，横向拉伸或者填补空白的效果”

• 利用rem布局
  rem : 某个元素的字体大小与根元素的相对单位
  原理：依照某特定宽度设置rem值，所有需要适配的元素，尺寸均换算成rem进行布局。
  主要是用px写css/less，构建时再换算成rem，常使用的插件postcss-pxtorem、autoprefixer（自动加前缀）。
  postcss-pxtorem提供了不同的参数设置来换算css中的px。eg: rootValue用来定义换算时根元素的值，mediaQuery决定是否换算media query中的大小，minPixelValue用来定义最小的不需换算的px值（比如可以不转化1px的大小）。此外还有propWhiteList、selectorBlackList、replace等参数可供设置