【前端基础】整理常见的单位 px em rem % vw vh vmin vmax rpx

基本单位

单位 计算方式 简介
px 标准像素 优点兼容性最好,缺点没有弹性,对于过大过小屏幕显示效果不好
em font-size元素大小 1em等于font-size的大小(font-size默认为16px)不常用,利用font-size属性可以继承的特点。
rem html元素大小 1rem等于html的大小,如html大小为100px,0.1rem就等于10px,常用。
% 父元素大小 常用,很好理解,父元素的百分比。
vw 视口宽度的1% window.innerWidth元素的1%,如果视口宽度为200px,1vw等于2px,
vh 视口高度的1% window.innerHeight元素的1%,与上同理
vmin vw、vh中的最小 css3属性,可以用vm简写,但ie9不支持简写
vmax vw、vh中的最大 css3属性,兼容性很差,不推荐用。
rpx 微信标准弹性单位 微信小程序长度属性,在iphone678中1rpx=0.5px,其他大小的视口会相对变化

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值