vue-cli 配置 lib-flexible + rem,实现移动端宽度适配

1,795

总结备忘一下之前移动端项目宽度自适应的方案。

之前没接触过手淘 flexible 的伙伴可以先看一下大漠老师的这篇文章,这样你会知道为什么长度用 rem,字体用 px

使用 lib-flexible

  1. 安装 flexible
npm install lib-flexible -D
  1. 引入 flexible

在入口文件 main.js 中直接引入

import 'lib-flexible'

px 转 rem

之前看过很多网上的答案,都是使用插件 px2rem-loader 实现 px 自动转换 rem。

不过这个插件并不能转换第三方UI样式,如果你的项目没有引入第三方UI,可以使用这个插件。

px2rem-loader

  1. 安装 px2rem-loader
npm install px2rem-loader -D
  1. 配置 px2rem-loader

在 build/utils.js 中,修改cssLoader配置:

const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap,
      importLoaders: 2 // 在css-loader前应用的loader数目,默认为0
    // 如果不加入这个,通过@import加入的css外部文件将不能正常转换。
    // 如果你的项目还有应用其他loader,请加大数字
    }
}

const px2remLoader = {
    loader: 'px2rem-loader',
    option: {
        remUnit: 75 // 设计稿的1/10,一般移动端设计稿为750px
    }
}

function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS
      ? [cssLoader, postcssLoader, px2remLoader]
      : [cssLoader, px2remLoader]// 在此处添加px2remLoader
    
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
    // .......
}
  1. px2rem 用法

直接写px,编译后会直接转换成 rem。

在px后面加 /*no*/,不会转换px,会原样输出,一般border需要用这个规则。

在px后面加 /*px*/,会根据dpr的不同,自动生成三套方案,用于字体大小设置。

示例:

.box {
    width: 150px;
    font-size: 28px; /*px*/
    border: 1px solid #eee; /*no*/
}

编译后:

.box {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    font-size: 14px;
}
[data-dpr="2"] .selector {
    font-size: 28px;
}
[data-dpr="3"] .selector {
    font-size: 42px;
}

注意点:

  • 完成配置后注意重启项目
  • 不需要在 index.html 的头部加 <meta>

postcss-px2rem-exclude

如果你的项目需要引入第三方UI框架,那就不能使用 px2rem-loader。

因为第三方ui框架的css是基于data-dpr为1的时候所编写,所以只要不转换框架的css样式就可以了。

postcss-px2rem-exclude 插件可以设置不转换的文件。

  1. 卸载冲突插件

如果项目中存在 px2rem-loader、postcss-px2rem,先卸载掉,不然插件不会生效。(不要忘了把之前的配置也删除)

  1. 安装 postcss-px2rem-exclude
npm install postcss-px2rem-exclude -D
  1. 配置 postcss-px2rem-exclude

在.postcssrc.js 文件中添加如下代码

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px2rem-exclude': {
      // 添加的代码
      remUnit: 75,
      exclude: /node_modules|folder_name/i 
      // 正则,忽略node_modules目录下的文件
    }
  }
}

如果你的项目没有生成这个独立文件,就需要在你的package.json里设置。

"postcss": {
    "plugins": {
        "autoprefixer": {},
        'postcss-px2rem-exclude': {
            "remUnit": 75,
            "exclude": "/node_modules|folder_name/i"
        }
    }
}

Tips:

在iOS中可能会遇到点击输入框,页面放大的问题,可以在 index.html 加入meta

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