下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:vue-cli引用vant使用rem自适应

作者:pplok     来源: https://www.cnblogs.com/pplok/p/11943730.html点击数:1224发布时间: 2020-03-15 22:15:58

标签: Androidwebrem

Web开发

  rem这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

  目前,除了IE8及更早版本外,所有浏览器均已支持rem。

  摘要

  由于需要用到弹出层但是懒得造轮子所以使用vant

  介绍

  使用的node包管理器为yarn

  vue-cli版本4

  rem计算方式为index.html的js脚本计算

  安装vant

  yarnaddvant

  配置

  安装babel-plugin-import实现按需加载

  yarnaddbabel-plugin-import

  配置babel

  .babelrc与package.json同级如果没有就创建一个

  {

  "plugins":[

  ["import",{

  "libraryName":"vant",

  "libraryDirectory":"es",

  "style":true

  }]

  ]

  }

  安装postcss-pxtorem这个是将px转为rem

  yarnaddpostcss-pxtorem

  在package.json配置这个“postcss”默认配置下是存在的直接替换掉就可以

  "postcss":{

  "plugins":{

  "autoprefixer":{

  "browsers":[

  "Android>=4.0",

  "iOS>=7"

  ]

  },

  "postcss-pxtorem":{

  "rootValue":100,//结果为:设计稿元素尺寸/100,比如元素宽750px,最终页面会换算成7.5rem,可以理解为1rem等于多少的px

  "propList":[

  "*"

  ]

  }

  }

  },

  到此位置配置就完成了

  然后就可以使用官方的引入方式了

  REM是相对单位,是相对HTML根元素。

赞(10)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程