---- 淘宝优惠券 ----资源下载 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

VantUI实现pxtorem

前端开发 蚂蚁 29℃ 0评论

需要安装2个依赖(amfe-flexible和postcss-pxtorem)搭配使用以实现px和rem自适配效果

安装amfe-flexible

npm i amfe-flexible -S

在main.js中引入

// 引入amfe-flexible
import 'amfe-flexible';

安装postcss-pxtorem

npm i postcss-pxtorem@5.1.1 -D

配置.postcssrc.js文件

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    // 主要是postcss-pxtorem这里的配置要有
    "postcss-pxtorem": {
      rootValue({file}) {
        // 这里需要动态设置rootValue值,以达到同时适配vant-UI和设计稿
        // 适配vant-UI的设计稿尺寸是375 / 10 = 37.5
        // 适配项目设计稿尺寸是750 / 10 = 75
        // 这里是判断要处理的文件是否是vant组件库的文件,是的话就按375设计稿尺寸走,否则按你项目设计稿的尺寸走,你项目是750就写75,是640就写64,如此类推
        return file.includes('vant') ? 37.5 : 75
      },
      propList: ["*"],
      // 排除列表,不需要将px转换为rem的文件可写在这里
      // selectorBlackList:['vant']
    }
  }
}

vantui官网对于移动端自适应的说明地址

转载请注明:有爱前端 » VantUI实现pxtorem

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情