CSS Units

前两周就打算补一档关于 CSS 的文章,然而一直各种 project 和其他事情忙着,也是疏于更新了(:з」∠)

在前端开发里少不了对元素宽高的调整修改,尤其在移动端开发越来越受宠的时代,自适应大小的单位则更受开发者欢迎。

在以往的开发过程中我接触较多的也就只有 px 和 em, rem。最近在学习的过程中发现了还有很多其他的单位,在此稍作总结。

px

pixel 对应的就是像素点,算是最为常用的单位之一。不过在做移动端开发的时候我觉得缺陷也很明显:不同的手机屏幕大小有很大差别,同样的长宽如果用 px 定义后,换一个屏幕大小来看之前完美的设计就变成渣渣了。

em & rem

em 和 rem 都是相对单位,区别在于:
em 定义的是相对于当前对象内文本的字体大小,并且会继承父元素的单位长度。 因此在 em 出现级联嵌套定义的时候,其大小可能出现不一致的情况。
rem 则在一定程度上解决了这个问题。rem 的 r 指的就是 root,因此所有的相对大小针对的都是根节点元素的字体大小。

vh & vw

前面说 rem 已经是一个不错的自适应解决方案了,不过在实践中我觉得还是和预想有些出入:根元素一般值得是 html 的字体大小,然而对于不同大小的屏幕来说,其 html 默认字体大小也有所不同,最终在手机上的显示其实也是挺难调整的,有没有什么万能钥匙呢?

在和小伙伴做 project 的时候发现有用到 vh 和 vw 的单位。虽然还没有仔细研究,不过我个人觉得这似乎能解决很多常见的问题。
vh 和 vw 的基准都是 viewport,也就是窗口能看到的大小。 而 viewport 默认是 100% 的情况。
比如:
手机浏览器高度为 500px, 则 7vh = 500px / 100 * 7 = 35px
vw 也是同样的情况。
暂时能想到的不利情况就是,移动端使用时,用户可能会想要放大某个部分,而使用 vh / vw 的情况则进行了对应的缩放,使得用户无法达成这样的效果,也是一个弊端(:з」∠)
由此也解释了为啥 淘宝 网易 的手机端页面似乎都是各种计算后求得的 px
万能钥匙果然还是不存在的- -

vmin & vmax

这两个单位和 vh & vw 有相关的地方,对应的是 viewport 的最大最小值
看一般的用法是固定某些元素,我暂时想到的话也许对竖屏横屏的情况也有理想的兼容状态?

ex & ch

ex 和 ch 这两个单位依赖于当前的字体(似乎对盲文排版和其他 accessibility 有很大用处,一般也很少用)
ex 定义的是小写 x 字母的高度
ch 定义的则是数字 0 的宽度

others

处理以上提及的意外,还有很多不常用的绝对长度单位,比如 pt, mm, pc, cm,in 等,都是实际生活常用的单位,不过在开发当中用处不是很大。
换算方式如下:
1in = 2.54cm = 25.4 mm = 72pt = 6pc

参考链接

  1. 7个你可能不认识的CSS单位
  2. 菜鸟教程