vue移动端适配方案 - px 自动转 rem

原创

已于 2022-05-24 14:33:09 修改 · 3k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2022-04-06 16:43:51 首次发布

本文介绍了如何通过安装lib-flexible和postcss-pxtorem，以及配置postcss.config.js来实现移动端项目的高清适配。lib-flexible动态设置html字体大小，postcss-pxtorem自动将CSS中的px转换为rem，以适应不同屏幕尺寸。同时提到了需要注意的细节，如避免手动计算rem，以及处理postcss-pxtorem的版本兼容问题。

1.安装lib-flexible

yarn add lib-flexible

2.引入lib-flexible

# src/main.ts

import 'lib-flexible/flexible'

3.安装postcss-pxtorem

yarn add postcss-pxtorem

4.在根目录下新建 postcss.config.js

# project_name/postcss.config.js

module.exports = {
    plugins: {
    // 兼容浏览器，添加前缀
    autoprefixer: {
        overrideBrowserslist: [
          "Android 4.1",
          "iOS 7.1",
          "Chrome > 31",
          "ff > 31",
          "ie >= 8",
          "last 10 versions",
        ],
        grid: true,
      },
      "postcss-pxtorem": {
        //rootValue: 16,//结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
        rootValue: 75, //通常结合 lib-flexible 设置 rem 基准值,默认用75,不然容易出问题
        propList: ["*"], // 需要做转化处理的属性，如`hight`、`width`、`mar