vue-自适应布局-postcss-pxtorem

原理:
比如一个375px设计稿 其中一个320px宽度的元素 如何实现自适应布局呢?

其实可以这样理解:
我们先计算出375屏幕时候320px的大小,在屏幕变化时候,这些元素都会等比例缩放
比如屏幕从375 变为750px时候,320 应该变为640

而有一个单位就可以做到统一缩放,可以将320px写为320rem ,而html 的font-size可以写为1px
然后根据屏幕变化进行更新html 的font-size 就可以达到缩放了,比如750px屏幕下将html 的font-size修改为2px ,那么320rem 计算出的值就是640px

而postcss-pxtorem 其实就是利用了这个原理,
rootValue:设置为16 意思是 一开始是以html的font-size为16px 进行换算
也就是320px 换算为20rem
32px的元素被换算为2rem
但是仅仅配置这里还是不行的,此时不管屏幕多大还是显示的在375px下的样式
所以我们应该监听屏幕变化,比如切换到750px屏幕时候,根html的font-size应该被设置为32px ,那么20rem 对应的值才会被算为640px

import $ from 'jquery'
// 设置 rem 函数
function setRem() {
  // 1920 默认大小16px; 1920px = 120rem ;每个元素px基础上/16

  // 375 屏幕时候使用16px
  // 750 屏幕时候使用32px
  const screenWidth = 375
  const scale = screenWidth / 16
  const htmlWidth = document.documentElement.clientWidth || 
  document.body.clientWidth
  // 得到html的Dom元素
  const htmlDom = document.getElementsByTagName('html')[0]

  // 如果太大了  就当做500 来计算
  if (parseInt(htmlWidth) > 500) {
    htmlDom.style.fontSize = 500 / scale + 'px'
  } else {
    // 设置根元素字体大小
    htmlDom.style.fontSize = htmlWidth / scale + 'px'
  }
}
// 初始化
$(function () {
  setRem()
})
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值