前端、UI设计师需要知道的px，em，rem，rpx单位

2025-05-24 06:43:42

前端工程师，UI设计师，程序员遇到的单位 px，em，rem，rpx，我们来一一了解，知道如何去选择适合的单位。

工具/原料

html

css

电脑

编辑器：vscode

一、几种单位介绍

1、px：设备屏幕的像素，浏览器的默认字体高都是 16pxem：相对于父元素的比例（会继承父级元素的字体大小，代表倍数。继承的是计算公式，不是值）rem：相对于根元素的比例（始终是基于根元素 <html> ，代表倍数。继承的是计算公式，不是值） ① rem 要比 em 更好设置, ② 但是rem 不兼容低级浏览器，为了兼容不支持 rem 的浏览器 ③ 需要在各个使用了 rem 地方前面写上对应的 px 值，这样不支持的浏览器可以优雅降级。 ④ 如果用户群都使用最新版的浏览器，那推荐使用 rem，如果要考虑兼容性，那就使用 px，或者两者同时使用。rpx：rpx是微信小程序推出的一个单位（更好适配手机端）

二、px

1、px 是最基本的尺寸，就是设备的像素。通常我们说的电脑分辨率，就是像素的问题。

2、问题：怎么让 Chrome支持小于12px 的文字谷歌浏览器中，默认的中文汉字最小字体是12px，不管你设置成 8px 还是 10px，在浏览器中只会显示 12px（以前的问题，现在应该已经支持了，如果遇到这个问题可以这样解决）```HTML<style> p span{ font-size:10px; transform: scale(0.8); -webkit-transform:scale(0.8);}</style> 10px```

三、em

1、em 的使用是相对于其父级的字体大小的，即倍数。浏览器的默认字体高都是 16px，未经调整的浏览器显示 1em = 16px。①浏览器默认字体 16px = 1em = 100%(浏览器默认字体，关系不是很好转换) 假设我们父元素给的是 22px，子元素需要设置为 14px，我们就需要 14/22=0.63636364em（关系不是很好计算）② 浏览器会忽略小数 1.2em = 19.2px 实际上会是 19px 的效果如果设置 1.2em 则变成 19.2px,问题是 px 表示大小时数值会忽略掉小数位的。鉴于上面两个问题的存在，通常会人为地使 1em = 10px。也就是认为的去修改浏览器的默认值16px = 1em = 100%，使得它成为10px = 1em

2、问题：如何使得 160px = 1em = 100%浏览器的默擢噘橄堕认值16px = 1em = 100%，使得它成为10px = 1em 。看这两个等式，我们就知道要使得 p旌忭檀挢x 与 em 之间做改变，name就是借助 % 来作为桥梁。使得 1em = 10px = 62.5%，就可以让1em = 10px```CSShtml，body { font-size: 62.5%;}```因为默认时字体 16px = 100%，则有 10px = 62.5%。所以首先在 html 中全局声明 font-size=62.5%=10px，也就是定义了网页 body 默认字体大小为 10px，由于 em 有继承父级元素字体大小的特性，如果某元素的父级没有设定字体大小，那么它就继续了 body 默认字体大小 1em = 10px。注意：继承的是公式，不是计算结果值```CSShtml { font-size: 62.5%; /* 使得 1em = 10px */}span { font-size: 1.6em;}``````HTML<body></body>```结果：外层 `` 为 html 字体 10px 的 1.6倍 = 16px，内层 `` 为外层内容字体 16px 的 1.6倍 = 25px（或26px，不同浏览器取舍小数不同）。明显地，内部 `` 内的文字受到了父级 `` 的影响。基于这点，在实际使用中给我们的计算带来了很大的不便。`因此 rem 的产生`

四、rem

1、rem 的出现再也不用担心还要根据父级侍厚治越元素的 font-size 计算 em 值了，因为它始终是基于根元素 `<html>` 的。每次都根据根元素 html 的值来计算就可以了，没有上面 em 每次都根据自己的父元素来慢慢计算，那样复杂的计算，浏览器的默认值16px = 1em = 100%，使得它成为10px = 1em```CSShtml {font-size: 62.5%;}```注意：继承的是公式，不是计算结果值```CSShtml {font-size: 62.5%; /* 使得 1em = 10px */}span {font-size: 1.6rem;font-size: 16px;/* 由于 rem 并没有兼容所有的浏览器，如果是低级浏览器的话就不要用 rem 了吧，实在用了的话，要加上 font-size: 16px; 也就是 px 的单位来兼容低版本的浏览器例如要想兼容 IE7 和 IE8，你还是需要使用 px 来做单位。*/}``````HTML<body></body>```结果：内外 的内容均为 16px。

2、注意：有的时候只有 em 有效，rem 无效的！！！！！！！！！！！！！！首行缩进与行高使用 em 有效。使用 rem 就是无效的。```CSS<style>p {text-indent: 2em;line-height: 1.5em;}```

五、rpx

1、rpx 是微信小程序的尺寸单位，为了适应广大的前端开发者，微信小程序的 WXSS 具有 CSS 大部分特性。同时为了更适合开发小程序，微傻疑煜阖信开发者对 CSS 进行了扩充以及修改。* 尺寸单位(也就是 rpx 单位的使用)* 样式导入rpx (responsive pixel)可以根据屏幕宽度进行自适应。规定手机屏幕宽为 750rpx。就是所有手机的屏幕宽度均为 750rpx 的大小。具体的手机屏幕是多少 px ，要与 rpx 计算如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素```BASH# 设备 rpx 换算 px (屏幕宽度/750) px换算rpx (750/屏幕宽度)# iPhone5 1rpx = 0.42px 1px = 2.34rpx# iPhone6 1rpx = 0.5px 1px = 2rpx# iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx```

六、如何选择

1、px：设备屏幕的像素，浏览器的默认亨蚂擤缚字体高都是 16pxem：相对于父元素的比例（会继承父级元素的字体大小，代漉胜衲仰表倍数。继承的是计算公式，不是值）rem：相对于根元素的比例（始终是基于根元素 <html> ，代表倍数。继承的是计算公式，不是值） ① rem 要比 em 更好设置, ② 但是rem 不兼容低级浏览器，为了兼容不支持 rem 的浏览器 ③ 需要在各个使用了 rem 地方前面写上对应的 px 值，这样不支持的浏览器可以优雅降级。 ④ 如果用户群都使用最新版的浏览器，那推荐使用 rem，如果要考虑兼容性，那就使用 px，或者两者同时使用。rpx：rpx是微信小程序推出的一个单位（更好适配手机端）rem 是 em 的升级，要用的话就选择 rem 了，不要再去选择 em。但是 px 与 rem 怎么选择。rem 不兼容低级版本的浏览器，也看 UI 设计师怎么设计吧。用的多的还是 px。

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。