CSS 里，为什么大家都用 rem 作为单位？直接 em 更合理吧。

[3dwelcome]

最近在用 tailwindcss，里面所有的 padding 单位，都是 rem 。比如 p-4 是 padding: 1rem;

我页面有 CSS 局部缩放 zoom:0.8，适配来不同的屏幕。那么字体的上下左右边距，理应是根据当前字体大小，也就是 em 为单位来设置。

用 rem 边距，就相当于无视当前字体大小，引用根节点的上字体大小。两者字体大小不同，那排版就直接错乱了啊？很不理解。

[anguiao]

不知道你的需求是什么样的。但是一般来说，font-size 和 padding，本来就不应该是成比例缩放的。
比如说，我们要做一个按钮，当 font-size 是 16px 的时候，上下边距和左右边距分别是 12px 和 16px 。那么当 font-size 变成 20px 的时候，上下边距和左右边距绝不应该是 15px 和 20px，而是应该更大一点；而当 font-size 变成 12px 的时候，上下边距和左右边距也不应该是 9px 和 12px，而是应该更小一点。

[3dwelcome]

@anguiao 我的需求就是页面 zoom 缩放时，文字按钮的上下 padding 边距看起来正常一些。

用 em 没问题。

用 rem 的话，不管 zoom 设置多少，按钮边距大小都是一个恒定值，一直不变的，页面看起来很不协调。

[autoxbc]

zoom 是非标准方法，建议尽量不用。不考虑标准的话，这个例子里确实是 em 更合理

泛泛说的话，很多人写 CSS 并不考虑合理性，只是恰好凑出了能用的东西

http://p7.itc.cn/images03/20200523/500f5c83812240ae87cfd35225762d90.gif

[cheese]

用媒体查询代替 zoom 来做多分辨率适配，zoom 在某些浏览器下会遇到失效的情况。
在你提到的局部缩放的情况下，肯定是 em 控制最方便。但是 tailwindcss 的设计是整体响应式的，通过控制根目录的大小，控制整体的界面效果

[marcong95]

rem 的使用场景应该是弄一个可以控制的“绝对”单位，应该是代替 px 的存在，因为相对根元素本身作用不大

对于 zoom 来说我的认知还停留在当年 IE6 hack 上，用 transform: scale(0.8)不能满足你的需求吗？

[3dwelcome]

@marcong95 zoom 从初代 chrome 就开始支持了，而且支持的很好。

zoom 可以自适应高度，然而 transform: scale(0.8)不会改变原本 DIV 的高度，如果适应还要自己手动计算高度，用在这里显然不合适。

[TomatoYuyuko]

rem 和 em 有一个天敌叫做超大系统字体老年机。。。

[66beta]

rem 可以用来做布局

rem 不建议用在字号上，会有各种无法预期的 bug