移动端适配方案 postcss-pxtorem和amfe-flexibl

TC苦瓜

已于 2025-03-30 14:14:17 修改

阅读量833

点赞数 23

于 2025-03-04 21:23:27 首次发布

本文链接：https://blog.youkuaiyun.com/2302_80111658/article/details/146020692

版权

1.postcss-pxtorem和amfe-flexibl介绍

1.postcss-pxtorem和amfe-flexibl介绍

postcss-pxtorem

postcss-pxtorem 是一个 PostCSS 插件，用于将 px（像素） 单位转换成 rem（相对单位） 单位，常用于响应式设计中，以便根据不同的屏幕尺寸和分辨率自动调整元素的大小。

amfe-flexible

amfe-flexible 是一个 JavaScript 库，常用于移动端适配，特别是针对 iOS 和 Android 设备的屏幕尺寸差异进行布局优化。它的核心思想是通过动态修改根元素的 font-size 来实现页面的自适应布局。

amfe-flexible 是配置可伸缩布局方案，主要是将1rem设为viewWidth/10

2.安装

npm i amfe-flexible postcss-pxtorem

3.配置使用

脚手架vue-cli配置

在vue.congfig.js中配置添加代码

css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require("postcss-pxtorem")({
              rootValue: 37.5,  //假设根字体大小为 37.5px，那么 1rem 就等于 37.5px。
              selectorBlackList: ["weui", "mu"], 
              propList: ["*"],
            }),
          ],
        },
      },
    },
  },

        rootValue: 37.5：这个选项设置了根元素的字体大小，用来计算 rem 的基准值。
假设根字体大小为 37.5px，那么 1rem 就等于 37.5px。
        一般来说，根字体大小通常设置为 16px 或 10px，但这里设置为 37.5px 可能是为了适配某些设计方案（比如设计稿宽度 375px，根字体设置为 37.5px 使得 1rem 对应 10px 的设计稿尺寸）。
        selectorBlackList: ["weui", "mu"]：这个选项是一个数组，用于指定不需要转换 px 为 rem 的 CSS 选择器（类名、id等）。在这个例子中，所有类名为 weui 或 mu 的元素都不会被转换。
        例如，.weui-button { width: 100px; } 这类规则中的 px 将保持不变。
        propList: ["*"]：这个选项指定了哪些 CSS 属性需要进行单位转换。["*"] 表示所有的属性（包括 width、height、padding、font-size 等）都会被转换为 rem 单位。

在 module.exports中添加

最后在main.js中导入amfe-flexible

import 'amfe-flexible';

vite配置

可以参考vite官网文档

import pxtorem from 'postcss-pxtorem'

 css: {
    postcss: {
      plugins: [
        pxtorem({
          rootValue: 37.5,
           propList: ["*"]
        })
      ]
    }
  },

在指定位置添加代码