程序员的资源宝库

网站首页 > gitee 正文

vant使用rem(postcss-pxtorem和lib-flexible)进行页面适配

sanyeah 2024-03-29 15:21:00 gitee 1 ℃ 0 评论

Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具:

postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值

1.下载npm依赖

      npm install postcss-pxtorem --save-dev
      npm i -S amfe-flexible

2.在根目录修改postcss.config.js文件配置(如果没有自己需要在根目录下新建postcss.config.js)

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
      rootValue: 37.5,// 设计图页面尺寸如果是750就填75,是640就填入64,为了适配vantui我们保持和vant官方一致
      propList: ["*"]
    }
  }
};

3.在main.js引入需要计算rem的libflexible文件

      import "amfe-flexible";

4.重启服务
5.布局按照设计图px布局 然后就会自动计算rem的值

.test-box {
  width: 375px; // 会自动转化为10rem 铺满整个屏幕
  height: 500px;
  font-size: 32px;
  background: red;
}

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表