px与rem

px 实际上就是像素,用PX设置字体大小时,比较稳定和精确。px是固定长度单位,不随其它元素的变化而变化
em 就是根据基准来缩放字体的大小。em 是相对长度单位。em是相对于父级元素的单位,会随父级元素的属性(font-size或其它属性)变化而变化
rem是CSS3新增的一个相对单位,rem是相对于根目录(HTML元素)的,所有它会随HTML元素的属性(font-size)变化而变化
例如: ==屏幕宽度/设计宽度 = 1rem的值/预设定rem的值。
1920/1920=100/100 ;
所以 1rem=1920/1920*100 ;
document.documentElement 是html节点
document.documentElement.style.fontSize = ((windowWidth / designWidth) * rem2px) + ‘px’;
假如,用户将屏幕拖小了,变为960。1rem将自动变为50px;960/1920乘以100=50
这里需要判断下,当屏幕的宽度大于设计稿定义的宽度,用设计稿的宽度,如果小于,用屏幕宽度作为变量屏幕宽度。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值