vue2项目 amfe-flexible + postcss-pxtorem 移动端适配

成遗憾

于 2022-08-22 20:50:56 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 移动端文章标签： postcss vue

本文链接：https://blog.youkuaiyun.com/CYHLLF/article/details/126473413

vue 同时被 2 个专栏收录

4 篇文章

订阅专栏

移动端

1 篇文章

订阅专栏

本文介绍了如何通过amfe-flexible调整html字体大小以适应不同屏幕尺寸，并使用postcss-pxtorem将px转换为rem，实现跨设备的优雅布局。步骤包括安装、引入库文件和配置postcss插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明：

amfe-flexible：根据窗口视图的宽度/10 自动设定html的font-size大小，比如750px宽设定html字体大小为75px。

postcss-pxtorem：可以自动将样式中的px单位换算成rem单位

1.安装

npm install amfe-flexible --save

npm install postcss-pxtorem -D

2.在main.js文件中引入amfe-flexible

//main.js
//引入flexible
import "amfe-flexible"

3.配置postcss-pxtorem

在项目根目录里创建postcss.config.js，并进行如下配置：

module.exports = {
  plugins: [
      require('postcss-pxtorem')({
          rootValue:75,//代表1rem = 75px 比如页面宽750px,最终页面会换算成 10rem
          propList: ['*'],
          exclude: /node_modules/i  //这里表示不处理node_modules文件夹下的内容
      })
  ]
}