Can I use?
› http://caniuse.com/
Less
› http://lesscss.org
Cool Libraries
› Bootstrap from Twitter
› Jetstrap
这是一个创建于 1303 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近在用 tailwindcss，里面所有的 padding 单位，都是 rem 。比如 p-4 是 padding: 1rem;
我页面有 CSS 局部缩放 zoom:0.8，适配来不同的屏幕。那么字体的上下左右边距，理应是根据当前字体大小，也就是 em 为单位来设置。
用 rem 边距，就相当于无视当前字体大小，引用根节点的上字体大小。两者字体大小不同，那排版就直接错乱了啊？很不理解。
 |
1
anguiao 2021-06-03 13:22:58 +08:00
不知道你的需求是什么样的。但是一般来说，font-size 和 padding，本来就不应该是成比例缩放的。
比如说，我们要做一个按钮，当 font-size 是 16px 的时候，上下边距和左右边距分别是 12px 和 16px 。那么当 font-size 变成 20px 的时候，上下边距和左右边距绝不应该是 15px 和 20px，而是应该更大一点；而当 font-size 变成 12px 的时候，上下边距和左右边距也不应该是 9px 和 12px，而是应该更小一点。 |
 |
2
3dwelcome OP @anguiao 我的需求就是页面 zoom 缩放时，文字按钮的上下 padding 边距看起来正常一些。
用 em 没问题。 用 rem 的话，不管 zoom 设置多少，按钮边距大小都是一个恒定值，一直不变的，页面看起来很不协调。 |
 |
3
autoxbc 2021-06-03 13:54:01 +08:00  3
zoom 是非标准方法，建议尽量不用。不考虑标准的话，这个例子里确实是 em 更合理
泛泛说的话，很多人写 CSS 并不考虑合理性，只是恰好凑出了能用的东西 http://p7.itc.cn/images03/20200523/500f5c83812240ae87cfd35225762d90.gif |
 |
4
cheese 2021-06-03 14:09:13 +08:00 1
用媒体查询代替 zoom 来做多分辨率适配，zoom 在某些浏览器下会遇到失效的情况。
在你提到的局部缩放的情况下，肯定是 em 控制最方便。但是 tailwindcss 的设计是整体响应式的，通过控制根目录的大小，控制整体的界面效果 |
 |
5
marcong95 2021-06-03 16:02:12 +08:00
rem 的使用场景应该是弄一个可以控制的“绝对”单位，应该是代替 px 的存在，因为相对根元素本身作用不大
对于 zoom 来说我的认知还停留在当年 IE6 hack 上，用 transform: scale(0.8)不能满足你的需求吗？ |
|
6
3dwelcome OP @marcong95 zoom 从初代 chrome 就开始支持了，而且支持的很好。
zoom 可以自适应高度，然而 transform: scale(0.8)不会改变原本 DIV 的高度，如果适应还要自己手动计算高度，用在这里显然不合适。 |
 |
7
TomatoYuyuko 2021-06-03 16:25:31 +08:00 3
rem 和 em 有一个天敌叫做超大系统字体老年机。。。
|
 |
8
66beta 2021-06-03 16:42:26 +08:00
rem 可以用来做布局
rem 不建议用在字号上，会有各种无法预期的 bug |
Select Language