有关电脑pc,移动端,小程序,h5的写法,rem,px,vw的单位,区分转换

本文详细介绍了CSS中rem, px, vw, em四个单位的概念及其相互转换。rem是相对于HTML根元素的字体大小,px是物理像素单位,vw是视口宽度的百分比,em则继承自父元素的字体尺寸。通过举例说明如何在PC和手机端设计稿中进行单位转换,以实现1rem等于固定像素值的设置。文章还强调了在实际编码中这些单位的应用价值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

rem,px,vw,em的单位,区分转换

  1. rem,相对字体单位,相对HTML的字体尺寸;
  2. px,最常见的单位,屏幕的物理像素显示的点,通常一个物理像素点,他是根据屏幕大小去判定的呀,有时候屏幕大了会代表2个像素点;
  3. vw,视口宽度,也就是,也就是,1vw=1%*视图宽度。也就是说,一个视图100vw,白话就是100份中的一份;
  4. em,现在通常现在的浏览器,默认字体尺寸都是16px,1em =16 px 。em 会继承父级的尺寸,相对于他的父级的。

区分转换

1.我们假设pc的设计稿是以1920px为标准的。那么:
100vw = 1920px
1vw = 19.2px
我们想要: 1rem = 100px(这样方便我们在写代码的时候换算)
那么:
100px = 100vw / 19.2 = 1rem
所以:
1rem = 5.208vw。
这时候,我们只要给html的根元素设置:
font-size: 5.208vw即可。

2.同理的,手机端我们假设设计稿是以750px为标准的,那么:
100vw = 750px
1vw = 7.5px
我们想要: 1rem = 100px
那么:
100px = 100vw / 7.5 = 1rem
那么:
1rem = 13.33vw

同理:我们想要: 1rem = 10px
1rem = 1.33vw font-size= 1.33vw

在这里插入图片描述但是本着点赞自愿,收藏吃灰,还是多少可以支持一下。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

可恶吧

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值