有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue移动端amfe-flexible适配插件px自动转换rem

vue cat 4个月前 (06-12) 48次浏览 已收录 0个评论 扫描二维码

适配步骤
1.下载amfe-flexible
根据网页宽度, 设置html的font-size
npm add amfe-flexible

2.到main.js引入
import "amfe-flexible"

3.下载postcss和postcss-pxtorem@5.1.1
postcss: 后处理css, 编译翻译css代码
postcss-pxtorem: 把css代码里所有px计算转换成rem
npm add postcss postcss-pxtorem@5.1.1

4.根目录下创建postcss.config.js文件
对postcss进行设置

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // 能够把所有元素的px单位转成Rem
      // rootValue: 转换px的基准值。
      // 编码时, 一个元素宽是75px,则换成rem之后就是2rem
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

37.5 是如何得来的?
UI移动端设计图宽度375px, 而flexible.js会/10, 设置html的font-size为37.5

喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址