果冻公开课第十二课：CSS里最基本的长度单位

视频版：

CSS里最基本的长度单位是像素PX,可为什么不是毫米厘米之类的单位呢?

让我们先来回顾一下,米是怎么占领地球的。在米出现之前,标准长度单位是五花八门,比如说我国曾经把张开的大拇指尖和中指尖之间的间距作为一尺，把人伸开双臂的长度作为一仞。

到了公元前两百多年，秦始皇秦大哥看不下去混乱的度量单位,拉着商鞅说要"统一哈么，乱滴很"（陕西话），这才商量了一个标准的度量衡器具。而国外蛮夷也采用过类似的方式，英国曾经用国王亨利一世鼻子尖到手指尖的距离作为标准。

直到1791年,法国决定把通过巴黎的子午线从赤道到北极长度的一千万分之一作为长度单位，叫做米,这才确定了一个全球范围内统一的基本长度单位.

那么,灵魂拷问又来了,为什么CSS里不用毫米厘米,而要使用pixel像素呢?

先来看看像素是什么？受限于技术，计算机屏幕上的线不是连续的，它由一个个的点组成，这些点就是屏幕上所能显示的最小单位：设备像素。

而在真实世界中的线是连续的,并不存在一个所能显示的最小单位。从理论上来讲,如果真实世界存在一个最小单位：像素。那么同样也可以用像素来做真实世界的基本长度单位,推倒米大哥的统治。

不过直接让CSS像素等于设备像素存在两个问题：

一，是同样尺寸的屏幕，存在不同屏幕密度，以至于显示效果差异巨大。例如4寸的屏幕密度大的可能有6401136，密度小的可能只有320568。CSS中设置的500*300像素如果等同于设备像素，那么肉眼看起来尺寸相差能有一倍。

二，是不同尺寸的屏幕，即使是相同的屏幕密度，显示依旧效果差异巨大。例如布局时，7501334分辨率和6401136分辨率下，CSS设置两个350*350像素的浮动元素，在第二块屏幕上会被挤成两行，页面直接乱掉。

而这两个问题的根本其实就是解决，如何在不同屏幕上保持一致的浏览体验。

第一个问题，只需要把高密度屏幕的多个设备像素当做1个像素使用，比如在4寸的6401136分辨率屏幕上，用4个点表示一个CSS像素，就得到一个理想像素320568。

第二个问题稍微麻烦一点，由于屏幕厂商太多，分辨率可谓是百花齐放。为了保证浏览体验，需要让元素能自适应，用像素的话可谓是有心无力，有什么办法来寻找一种新的长度单位呢？

再回过头来看看尺的概念。每个人大姆指和中指之间的间距是不一样的，但是大家都把这段长度叫一尺。这不就是我们想要寻找的单位描述?每一只手相当于是一台显示器,大姆指和中指之间的距离相当于屏幕宽度。当我们说半尺红半尺绿的时候，无论分辨率是多少，浏览的体验都是一致的。

延着这个思路我们再来扩展一下，除了像素外，还有哪些单位可以用做我们的长度度量单位，以方便我们的网页布局呢? 毕竟连一只手一只脚都可以成为度量单位,还有什么是不可能的?

比如说:文字的大小(em和REM)?比如说,父无素的比例（%）?是的,这些都是被CSS支持的。如果你的脑洞足够大，这些单位又有足够的应用场景，你完全可以为CSS增加新的长度单位。

比如说：用使用者的手臂长短?使用者的瞳孔大小?emmm,这些脑洞也许在未来有一天能找自己的使用场景,但是给当前CSS学习者带来的困扰就是,这么多长度单位,该选择哪一个?

如果你是做一个960的定宽布局,使用像素px就足够了.

如果你需要做一个自适应各种手机的布局,就该使用vw，vh。

比如想要实现这样一个手机上常见的页面布局效果图

分别为banner，图标的宽度设置vw值，为字体的字号大小也设为vw值。通过对比发现即使分辨率不一样，图片和文字的大小都跟着不一样了，但是，最终效果却是等比缩放，完全实现了不同屏幕上一致的浏览体验。

.banner {

width: 95vw;

}

.column {

width: vw;

font-size: 5vw;

}

不过这样的页面虽然看起来适配很好，但是还是有继续优化的空间。

比如屏幕宽度扩大到一定程度时，字体看起来可能会过大，内边距也显得有些空，反而影响了用户的阅读体验。

因此如果是希望元素排版会随着字号的大小改变而改变的话,em和rem则必不可少 。

这次改变了字体和内边距的长度单位，让它们并不会完全随屏幕宽度变化，但却有了更好的阅读体验。

好了,这次的果冻公开课到这里要结束了,看起来我们是在讲述CSS里不同的长度单位如何使用,

实际上我们提出来的是一个煎熬灵魂的拷问,到底什么是长度单位,在虚拟世界里应该选择什么样的长度单位?希望大家能够学会用这种角度去思考学习,而不是单纯的去记忆这些单位的区别,这才是果冻想要告诉大家的道理~

下一集果冻小课堂将进入前端的JS部分，感兴趣的小伙伴们不要错过哦。请点击收藏并关注果冻公开课，我们将持续为您奉上最易懂最好看的IT知识。

怎么样是不是很简单？

赶紧上手写点代码练习一下吧~