前两周就打算补一档关于 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
