手淘的移动端适配方案flexible

时间:2024-08-19 09:05:08

基于 vue-cli 配置手淘的 lib-flexible + rem,实现移动端自适应

  1. 安装 flexible

    npm install lib-flexible --save
  2. 引入 flexible

    在项目入口文件 main.js 中添加如下代码,引入 flexible

    import 'lib-flexible'
  3. px 转 rem

    使用 webpack 的 px2rem-loader, 自动将 px 转换为 rem

  4. 安装 px2rem-loader

    npm install px2rem-loader --save-dev
  5. 配置 px2rem-loader

    在 vue-cli 生成的文件中, 找到以下文件 build/utils.js, 如下添加配置

    const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
    remUnit: 75 // 1rem=多少像素 这里的设计稿是750px。
    }
    }
    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
    })
    })
    }
    }
  6. px2rem 用法

    安装 px2rem 后,再使用 px 上有些不同,下面简单介绍一下。

    直接写 px,编译后会直接转化成 rem ---- 除开下面两种情况,其他长度用这个

    在 px 后面添加/no/,不会转化 px,会原样输出。 --- 一般 border 需用这个

    在 px 后面添加/px/, 会根据 dpr 的不同,生成三套代码。---- 一般字体需用这个

    示例代码

    /** 编译前 **/
    .selector {
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
    }
    /** 编译后(打包后的代码)**/
    .selector {
    width: 2rem;
    border: 1px solid #ddd;
    }
    [data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
    }
    [data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
    }
    [data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
    }

    重启项目,就可以愉快的用设计稿上的 px 了。

    注意:

    不能在 index.html 的头部加 name 为 viewport 的 meta 标签,flexible 会自动为我们添加!