美文网首页
为 px 正名

为 px 正名

作者: 耀得嘛 | 来源:发表于2019-03-24 13:09 被阅读0次

背景文章

正文

为了便于讨论,这里我们先暂时将 css 中的距离单位按是否与空间相关分为两类。空间相关的单位如 %, vw, vh。而今天主要要讨论的,是空间无关的三大单位:

  • px
  • em
  • rem

(提示:非科普贴,请确定自己已经理解上述单位的定义后再继续阅读)

px vs rem

近几年,前端便设计界流行起推崇用 rem 来指定字体大小等样式。大概都有这样一些理由:

用户可以通过设置浏览器的 HTML 字体大小来控制整站的字体大小

道理是对的,但实际上现在几乎没有人这样做。不争辩。

开发者可以通过设置 HTML 的 font-size 直接改变整站的字体大小

这叫什么?这叫变量,这特么还是个全局变量。

全局变量有什么危害还需要再补充一下么?如果你引入了两个组件库,他们都是按照 rem 来设计的,并且预设的 html.font-size 不同,你要怎么搞?

现代 web 开发中,如果你真的需要这样一个变量,完全可以在 js 中定义,在使用之处进行引用,这要安全得多。

使用 rem 增加了抽象层次,增加了理解(换算)成本,如果没有什么获益,那为什么还要继续使用它呢?

当然,如果你有正当的理由,权衡后认为利大于弊,自然另当别论。

px vs em

px 对 em 对替代性并没有那么强,因为 em 的运算模型和 px 差别比较大。

px 是一个绝对单位,而 em 是一个相对单位。

当你的组件存在嵌套关系,外部尺寸可变,且内部尺寸与外部尺寸成比例时,使用 em 就变得非常直观了。

虽然,这样的场景很少。

结论

  • 重要的是理解每种单位的实际含义,在具体场景下能作出正确的判断和选择
  • 在大多数场景下
    • px vs rem,我更倾向于使用 px
    • px vs em,仅在组件嵌套且存在内外尺寸依赖关系时使用 em,但这样但场景很少

参考

相关文章

  • 为 px 正名

    背景文章 简言 px 正文 为了便于讨论,这里我们先暂时将 css 中的距离单位按是否与空间相关分为两类。空间相关...

  • 学习笔记一——安卓与IOS设计规范

    线框图大小一般为640px*1136px,状态栏为320px*16px,标题栏 为320px*44px. ios页...

  • 为运动正名

    考虑了很久,还是决定在写运动之前,写这么一篇。 被妖魔化的运动 运动,作为我们与生俱来的能力,就像吃饭睡觉一样,本...

  • 为Copy正名

    原来想找一篇比较好的,关于对象Copy的博客推荐给大家,可是在网上浏览了一堆文章之后,大家都在纷纷讨论浅拷贝,深拷...

  • 为己正名

    思虑再三,我还是决定从学校的合唱群里面退出了。 感谢社团领导把我拉进合唱群,看到群里面的学生在里面...

  • 为暧正名

    陈粒的《小半》里唱道,“不敢回看,左顾右盼不自然的暗自喜欢”。初听见,就很心动。这短短一句,瞬间把我带回了年少的盛...

  • 为“营销”正名

    在昨晚听董总社群直播之前,一直认为营销就是“挖坑”,就是通过花言巧语如王婆卖瓜自卖自夸般把产品变现。以至很少接触关...

  • 为辐射正名

    锵锵锵锵锵~,说起辐射,大家首先想到的都是核武器,如果告诉大家,生活中我们使用的手机、电脑、微波炉都会产生辐射...

  • 为”视觉“正名

    其实做这个小栏目,有两个用意。 第一个,我们的团队,的确是在做“视觉赋能与深度学习”相关的讲座、培训和推广。这一方...

  • 为自己正名

    不把时间浪费在走路与洗澡上。 当面试或者见工时,提到你是哪里人。 我一说出 本地人 时候 看着他们惊讶的表情 很疑...

网友评论

      本文标题:为 px 正名

      本文链接:https://www.haomeiwen.com/subject/wjfuvqtx.html