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

最新推荐文章于 2024-11-16 22:50:52 发布

原创最新推荐文章于 2024-11-16 22:50:52 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#postcss #vue

vue 同时被 2 个专栏收录

4 篇文章

订阅专栏

移动端

1 篇文章

订阅专栏

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

说明：

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文件夹下的内容
      })
  ]
}