vue移动端适配方案flexible+px2remLoader使用指南及踩坑

vue移动端适配方案flexible+px2remLoader使用指南及踩坑

根据移动端不同的dpr来做适配是非常必要的，很多时候前端开发对UI设计稿都是凭感觉来做，导致编译完的页面与设计稿或多或少有些出入 。
造成这种现象就是因为开发人员可能对移动端适配的不重视，为了能够完全按照设计稿的标注来实现，我们接下来介绍一下在vue平台下基于flexible和px2rem-loader的移动端适配方案。

1.安装flexible及引用

代码.

//安装
npm install lib-flexible --save

//在入口js中引用
import 'lib-flexible'

2.安装px2rem-loader

px2rem-loader是px转换rem的工具
代码.

//安装
npm install px2rem-loader --save

3.配置px2rem-loader

有几处文件需要配置
首先是，vue-cli生成文件中的build/utils.js
代码.

exports.cssLoaders = function (options) {
  options = options || {}
  
  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap,
      importLoaders:15
    }
  }
  //增加代码，px转rem配置
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 72 //根据视觉稿，rem为px的十分之一，720宽度px 72rem
    }
  }

此处需要注意的是px2remloader的remUnit属性，此处填写的是设计稿宽度的十分之一，例如设计稿宽度是720，这里填写72

同样还是utils.js文件，讲px2remLoader添加进loaders数组中

function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

启动项目，愉快的按照设计稿用px来写页面了。

4.使用方法及我遇到的几个坑

1.按照px来编写都会转化成rem的形式，但是有些地方我们不想转换，可以用下面两种方法。

在px后面添加/*no*/，不会转化px，会原样输出。 — 一般border需用这个
在px后面添加/*px*/,会根据dpr的不同，生成三套代码。---- 一般字体需用这个

2.使用过程中，发现某些import外联样式不会被转化，注意避开这些坑。

<style src='../assets/style.css'>
 /* px2rem能正常转换 */
</style>

<style>
  /* px2rem不能正常转换 */
  @import '../assets/style.css';
</style>

<style>
  /* px2rem不能正常转换 */
  @import url('../assets/style.css');

</style>

3.无需自己增加html页面name=viewport的meta元标签。flexible会自动添加。