V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
3dwelcome
V2EX  ›  CSS

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

  •  
  •   3dwelcome · 2021-06-03 13:00:03 +08:00 · 2841 次点击
    这是一个创建于 1279 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    8 条回复    2021-06-03 16:42:26 +08:00
    anguiao
        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,而是应该更小一点。
    3dwelcome
        2
    3dwelcome  
    OP
       2021-06-03 13:34:03 +08:00
    @anguiao 我的需求就是页面 zoom 缩放时,文字按钮的上下 padding 边距看起来正常一些。

    用 em 没问题。

    用 rem 的话,不管 zoom 设置多少,按钮边距大小都是一个恒定值,一直不变的,页面看起来很不协调。
    autoxbc
        3
    autoxbc  
       2021-06-03 13:54:01 +08:00   ❤️ 3
    zoom 是非标准方法,建议尽量不用。不考虑标准的话,这个例子里确实是 em 更合理

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

    http://p7.itc.cn/images03/20200523/500f5c83812240ae87cfd35225762d90.gif
    cheese
        4
    cheese  
       2021-06-03 14:09:13 +08:00   ❤️ 1
    用媒体查询代替 zoom 来做多分辨率适配,zoom 在某些浏览器下会遇到失效的情况。
    在你提到的局部缩放的情况下,肯定是 em 控制最方便。但是 tailwindcss 的设计是整体响应式的,通过控制根目录的大小,控制整体的界面效果
    marcong95
        5
    marcong95  
       2021-06-03 16:02:12 +08:00
    rem 的使用场景应该是弄一个可以控制的“绝对”单位,应该是代替 px 的存在,因为相对根元素本身作用不大

    对于 zoom 来说我的认知还停留在当年 IE6 hack 上,用 transform: scale(0.8)不能满足你的需求吗?
    3dwelcome
        6
    3dwelcome  
    OP
       2021-06-03 16:09:21 +08:00
    @marcong95 zoom 从初代 chrome 就开始支持了,而且支持的很好。

    zoom 可以自适应高度,然而 transform: scale(0.8)不会改变原本 DIV 的高度,如果适应还要自己手动计算高度,用在这里显然不合适。
    TomatoYuyuko
        7
    TomatoYuyuko  
       2021-06-03 16:25:31 +08:00   ❤️ 3
    rem 和 em 有一个天敌叫做超大系统字体老年机。。。
    66beta
        8
    66beta  
       2021-06-03 16:42:26 +08:00
    rem 可以用来做布局

    rem 不建议用在字号上,会有各种无法预期的 bug
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1388 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 17:39 · PVG 01:39 · LAX 09:39 · JFK 12:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.