两种移动端适配方案

技术
字数统计: 1.7k   |   阅读时长≈ 7 分钟

一、lib-flexible+postcss-pxtorem

在相当长一段时间里，这两个插件搭配都是解决移动端布局的神器，lib-flexible是阿里手淘系开源的一个库，用于设置 font-size，同时处理一些窗口缩放的问题。直到今天，这个方案仍是解决移动端布局的主流方案。

下面我们分别将这两个工具配置到项目中完成 REM 适配。

1.1使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）

1、安装

1
2
# yarn add amfe-flexible
npm i amfe-flexible

2、然后在 main.js 中加载执行该模块

1
import "amfe-flexible";

最后测试：在浏览器中切换不同的手机设备尺寸，观察 html 标签 font-size 的变化。

1.2使用 postcss-pxtorem 将 px 转为 rem

1、安装

1
2
3
# yarn add -D postcss-pxtorem
# -D 是 --save-dev 的简写
npm install postcss-pxtorem -D

2、然后在项目根目录中创建 .postcssrc.js 文件

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ["Android >= 4.0", "iOS >= 8"],
    },
    "postcss-pxtorem": {
      rootValue: 37.5,
      propList: ["*"],
    },
  },
};

3、配置完毕，重新启动服务

最后测试：刷新浏览器页面，审查元素的样式查看是否已将 px 转换为 rem。

需要注意的是：

  • 该插件**不能转换行内样式中的 px**，例如 <div style="width: 200px;"></div>

1.3 关于 .postcssrc.js 配置文件

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ["Android >= 4.0", "iOS >= 8"],
    },
    "postcss-pxtorem": {
      rootValue: 37.5,
      propList: ["*"],
    },
  },
};

.postcssrc.js 是 PostCSS 的配置文件。

（1）PostCSS 介绍

PostCSS 是一个处理 CSS 的处理工具，本身功能比较单一，它主要负责解析 CSS 代码，再交由插件来进行处理，它的插件体系非常强大，所能进行的操作是多种多样的，例如：

目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要，开发出自己的 PostCSS 插件。

PostCSS 一般不单独使用，而是与已有的构建工具进行集成。

Vue CLI 默认集成了 PostCSS，并且默认开启了 autoprefixer 插件。

Vue CLI 内部使用了 PostCSS。

你可以通过 .postcssrc 或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。

我们默认开启了 autoprefixer。如果要配置目标浏览器，可使用 package.json 的 browserslist 字段。

（2）Autoprefixer 插件的配置

image-20200319104557718

autoprefixer 是一个自动添加浏览器前缀的 PostCss 插件，browsers 用来配置兼容的浏览器版本信息，但是写在这里的话会引起编译器警告。

1
2
3
4
5
6
7
8
9
10
11
Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.

Using browsers option can cause errors. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.

If you really need to use option, rename it to overrideBrowserslist.

Learn more at:
https://github.com/browserslist/browserslist#readme
https://twitter.com/browserslist

警告意思就是说你应该将 browsers 选项写到 package.json 或 .browserlistrc 文件中。

1
2
3
4
5
6
[Android]
>= 4.0

[iOS]
>= 8

具体语法请参考这里。

（3）postcss-pxtorem 插件的配置

image-20200319105610557

  • rootValue：表示根元素字体大小，它会根据根元素大小进行单位转换
  • propList 用来设定可以从 px 转为 rem 的属性
    • 例如 * 就是所有属性都要转换，width 就是仅转换 width 属性

rootValue 应该如何设置呢？

1
2
如果你使用的是基于 lib-flexable 的 REM 适配方案，则应该设置为你的设计稿的十分之一。
例如设计稿是 750 宽，则应该设置为 75。

大多数设计稿的原型都是以 iphone6 为原型，iphone6 设备的宽是 750，我们的设计稿也是这样。

但是 Vant 建议设置为 37.5，为什么呢？

1
因为 Vant 是基于 375 写的，所以如果你设置为 75 的话，Vant 的样式就小了一半。

所以如果设置为 37.5 的话，Vant 的样式是没有问题的，但是我们在测量设计稿的时候都必须除 2 才能使用，否则就会变得很大。

这样做其实也没有问题，但是有没有更好的办法呢？我就想实现测量多少写多少（不用换算）。于是聪明的你就想，可以不可以这样来做？

  • 如果是 Vant 的样式，就把 rootValue 设置为 37.5 来转换
  • 如果是我们的样式，就按照 75 的 rootValue 来转换

通过查阅文档我们可以看到 rootValue 支持两种参数类型：

  • 数字：固定值
  • 函数：动态计算返回
    • postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数
    • 它会把被处理的 CSS 文件相关的信息通过参数传递给该函数

所以我们修改配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/**
 * PostCSS 配置文件
 */

module.exports = {
  // 配置要使用的 PostCSS 插件
  plugins: {
    // 配置使用 autoprefixer 插件
    // 作用：生成浏览器 CSS 样式规则前缀
    // VueCLI 内部已经配置了 autoprefixer 插件
    // 所以又配置了一次，所以产生冲突了
    // 'autoprefixer': { // autoprefixer 插件的配置
    //   // 配置要兼容到的环境信息
    //   browsers: ['Android >= 4.0', 'iOS >= 8']
    // },

    // 配置使用 postcss-pxtorem 插件
    // 作用：把 px 转为 rem
    "postcss-pxtorem": {
      rootValue({ file }) {
        return file.indexOf("vant") !== -1 ? 37.5 : 75;
      },
      propList: ["*"],
    },
  },
};

配置完毕，把服务重启一下

二、postcss-px-to-viewport

在最近的一个移动端项目中，我使用第一种方案遇到了一些问题，导致我不能将 px 转化为 rem。于是我又找到了另外一种方案

postcss-px-to-viewport是一款优秀的插件，它将 px 转换成视口单位 vw https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md#%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0

2.1 安装

1
$ npm install postcss-px-to-viewport --save-dev

或者

1
$ yarn add -D postcss-px-to-viewport

2.2 在项目根目录下添加.postcssrc.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
module.exports = {
  plugins: {
    "postcss-px-to-viewport": {
      // 配置详情可见 https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md#%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0
      unitToConvert: "px",
      viewportWidth: 750,
      unitPrecision: 5,
      propList: ["*"],
      viewportUnit: "vw",
      fontViewportUnit: "vw",
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: [/node_modules/],
      include: undefined,
      landscape: false,
      landscapeUnit: "vw",
      landscapeWidth: 1920,
    },
  },
};

最后重启项目即可

  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
  • Copyrights © 2023-2025 congtianfeng
  • 访问人数: | 浏览次数: