解决vue移动端适配问题

第二步，在项目根目录下添加.postcssrc.js文件，在里面写上

module.exports = {
   plugins: { 'postcss-pxtorem':
    { rootValue: 32, propList: ['*'], minPixelValue: 2 }
 }
 };

rootValue，这里就是根目录的字体大小是32px，这里为啥设置成32呢，因为一般设计稿是750，比iphone6的大一倍，所以设置成16的两倍，就是32px;proplist就是那些属性需要转换成rem，这里是全部的意思；

比如你可选择设置； propList: [‘font’, ‘font-size’, ‘line-height’, ‘letter-spacing’]

minPixelValue就是最小转换单位，这是最小转换单位是2px的意思；

第三步，动态设置根字体大小！一段简单的js插入在head里面；

(function() {
 function autoRootFontSize() {
  document.documentElement.style.fontSize =Math.min(screen.width,document.documentElement.getBoundingClientRect().width) / 750 * 32 + 'px';
   // 取screen.width和document.documentElement.getBoundingClientRect().width的最小值；除以750，乘以32；懂的起撒，就是原本是750大小的32px;如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化！是不是很简单
 }
 window.addEventListener('resize', autoRootFontSize);
 autoRootFontSize();
})();

这里，我想说的是完全可以用vw去设置根字体大小，26px/375px=4.267vw;就不用js去算了！

html{font-size:4.267vw}; //因为这个字体大小完全是随屏幕正比变化；

四、vw——开始干！

vw的方案就简单多了，因为vw本来就相对屏幕的百分比，所以我们不用再去动态的改变根字体大小了，只需要把750上的px大小转换成对应的vw值就完了，这一步交给postcss工具就可以！

所以只需要两步！

第一步，先用vue-cli快速构建出一个项目，然后，安装postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url

第二步，在项目根目录下添加.postcssrc.js文件，在里面写上

module.exports = {
 "plugins": {
  "postcss-import": {},
  "postcss-url": {},
  "postcss-aspect-ratio-mini": {},
  "postcss-write-svg": {
   utf8: false
  },
  "postcss-cssnext": {},
  "postcss-px-to-viewport": {
   viewportWidth: 750,
   unitPrecision: 3,
   viewportUnit: 'vw',
   selectorBlackList: ['.ignore', '.hairlines'],
   minPixelValue: 1,
   mediaQuery: false
  },
  "postcss-viewport-units": {},
 }
}

viewportWidth是你设计稿的大小750，然后unitPrecision是vw值保留的小数点个数；

五、总结！