rem和px是怎么转换的
说起rem，大家可能有点儿懵，别急，我来给你掰扯开。rem的意思是“root em”，也就是根元素的字体大小。比如，我们常用的浏览器默认字体大小是16px，那么1rem就是16px。如果你的html标签的font-size被设置成了14px，那么1rem就等于14px。简而言之：
- rem是一种长度单位，是基于html根元素的字体大小计算的。
- 默认字体大小是16px，比如设计稿要转成rem，就得用px除以16。
- 换算公式简单粗暴：rem = px / font-size，举个栗子，设计稿里42px的宽度，转换成rem就是42除以14，等于3rem。
此外，em和rem的关系也挺好玩的。em是继承父元素字体大小的单位，现代浏览器默认字体是16px，1em就是16px。但em会继承父级的font-size，稍微复杂点，怕乱套所以我们更推荐用rem来做响应式。
vw、px、rem之间是怎么换算的 如何设置1rem等于16px
这边重点来了！vw是视窗宽度单位，100vw就是浏览器或设备屏幕的全部宽度。假设你的设计稿宽度是1920px，那100vw就对应1920px。
我们先整理一下vw、px、rem转化的套路：
- 设计稿定的宽度是1920px，所以100vw = 1920px。这样如果你要设置宽度为设计稿的100px，那就是(100 / 1920) * 100vw ≈ 5.21vw。
- 在写样式时，所有px换算成rem，优点是字体会按根元素大小动态放缩。换rem一个关键点是如何给html设定font-size。设置成16px很常见，这样1rem等于16px。
- 页面适配一般按最小宽度320px起步，html的font-size可以用百分比写成62.5%（16px × 62.5% = 10px），这样换算就更方便。
很多时候，我们会这样设置：
html {
font-size: 62.5%; /* 这样1rem = 10px */
}
然后计算设计稿上的尺寸除以10，直接得出rem值。这样超方便，写代码也轻松啊！
关于px和rem完美转换有个流行的公式：
rem值 = 设计稿px值 / 基准html字体大小
比如设计稿宽度是100px，基准font-size是50px，那就100/50=2rem。比较简单粗暴啦。
相关问题解答
-
rem和px的转换复杂吗
哎呀，一点都不复杂！只要记住rem是根据根元素字体大小计算的单位，知道了font-size多少，px除以它就完事儿。比如你html设置了16px，那1rem就是16px，超简单啦！不用头疼，慢慢来，熟能生巧。 -
为什么要用rem代替px
这点超重要！用rem能让页面自动适配不同屏幕大小，字体和元素会跟着放大缩小，体验升级超多！不像px那样死板，设计师们都爱用rem，尤其是移动端，真的是棒棒哒！ -
vw单位在响应式设计中怎么用
vw超级实用，就是屏幕宽度的百分比，100vw就等于屏幕宽度，换算特别直观。你要搞大宽度元素或者比例布局它就很管用！别忘了，vw和rem可以搭配着用，灵活又高效。 -
怎么设置html font-size才能更好地兼容各种设备
这个嘛，大家一般习惯用百分比写，比如62.5%，这样1rem变成10px，计算方便，这招挺有名的！不过还要结合媒体查询调整字体，保证不管大屏还是小屏都看着舒服，响应式做得好，用户体验才牛掰！
本文来自作者[江栋]投稿，不代表新知探坊号立场，如若转载，请注明出处：https://www.zglxfj.com/syzn/202511-1JzIP7u9hM9.html
评论列表（3条）
我是新知探坊号的签约作者“江栋”
本文概览：rem和px是怎么转换的 说起rem，大家可能有点儿懵，别急，我来给你掰扯开。 rem的意思是“root em”，也就是根元素的字体大小 。比如，我们常用的浏览器默认字体大小是...
文章不错《rem和px的转换规则 vw与rem如何换算》内容很有帮助