css_04 | CSS——CSS 值和单位

本文推荐 PC 端阅读~本文版权归 “公众号 | 前端一万小时” 所有，未经授权，请勿转载！
复制代码

css_04
复制代码

1. 你有没有使用过视网膜分辨率的图形？当中使用什么技术？
2. px，em，rem，vw 有什么区别？
复制代码

前言： 本篇也是一篇纯基础、纯理论文章，但重要性毋庸置疑：“……在利用 CSS 能做的几乎所有工作中，其基础都是“单位”，这是影响所有属性的“颜色”、“距离”和“大小”的一种元素……如果理解了这里介绍的概念，你就能更快地学习和使用 CSS 的余下内容”。

1 指定颜色

对于“颜色”的学习，让我们先认真复习文章：《web_05 | Web 前置知识——用李涛高手之路前3节课开启我们光与色的大门》。

在此篇基础上，我们可以很轻松的认识到：一个 Web 创作人员至少可以用 3 种方法来设置“颜色”。

1.1 按“颜色名”指定颜色

CSS2.1 定义了 17 种颜色名，CSS3 中包含了基于标准 X11 RGB 值的 140 种颜色的扩展颜色表。如下例，这些颜色可以直接以“名字”的方式拿来用，大多数浏览器都能识别。

h1 {color: red;
}h2 {color: green;
}h3 {color: maroon;
}   /*褐红色*/
复制代码

但，这种颜色展示方式的弊端就在于，没办法指定色谱中任意的颜色。

1.2 函数式 RGB 指定颜色

如下例，可以用“整数记法”，也可以用对应的“百分数记法”。二者没有孰优孰劣之分，实际工作中“整数记法”更常用，更有用。

⚠️百分数是针对“255”来相应计算的，因为，RGB 三者中的任何一种光都有 0-255 个颜色的位置（0 是接近无颜色，255 就是很纯的红、绿、蓝）。实际工作中，没必要对二者进行转换。

h1 {color: rgb(255,0,0);
}         /*红色*/h3 {color: rgb(50%,0%,0%);
}       /*褐红色*/h3 {color: rgb(128,0,0);
}         /*褐红色*/
复制代码

1.3 十六进制 RGB 指定颜色：

h1 {color: #CC6600;
}
复制代码

⚠️上例代码中，#CC6600 就是一个十六进制码。格式为：

以 # 开头
按顺序分别用两位数字指定红、绿、蓝的分量
CC 为“红”的分量、66 为“绿”的分量、00 为“蓝”的分量

十六进制码并不是基于 0-9 这 10 个数字，而是基于 0-F 这 16 个数字：0、1、2、3、4、5、6、7、8、9、A（对应 10）、B（对应 11）、C（对应 12）、D（对应 13）、E（对应 14）、F（对应 15）。

把“十六进制码” #CC6600 转化为“十进制”：

将十六进制颜色分解为“红”、“绿”、“蓝”份量：
红：CC
绿：66
蓝：00
以 CC 为例，我们知道，十进制用两位数最大只能表示 99 ，而十六进制是想通过用两位数来表示 0-255 这所有 256 个值。
那意思就是，十进制是逢十进一，而十六进制是逢十六进一。
那同为两位数 CC ，在十进制下，是十位的 C 个十、个位的 C 个 1；而十六进制下，就是十六位下的 C 个十六、个位的 C 个 1。
故：十六进制下的 CC 转化为十进制为：12 ✖️16+12 ✖️1=204。
同理得 66：6 ✖️16+6 ✖️1=102； 00 ：0 ✖️16+0 ✖️1=0。
即：

h1 {color: #CC6600;
}
复制代码

等同于：

h1 {color: rgb(204,102,0);
}
复制代码

也等同于：

h1 {color: rgb(80%,40%,0%);
}
复制代码

?当然，要把 RGB 十进制转化为十六进制则是：用十进制数字➗16，所得数字小数点前的整数部分为“十六位”；再将小数点后的数乘以 16，所得的数为个位。

2 绝对长度单位

描述现实世界的长度单位有很多。
厘米（cm）、毫米（mm）、英寸（in）、点（pt）、派卡（pc）等都属于绝对长度单位。“点”和“派卡”是印刷术语，用作印刷的度量单位。

1 英寸=2.54 厘米
1 厘米=0.394 英寸
1 英寸=72 点
1 英寸=6 派卡
1 派卡=12 点

为什么我们要使用这么多的单位？可以简单理解成不同地区对长度单位的定义不同，有各种各样的历史遗留问题。

我们在现实世界中描绘的长度，是一维空间（点到点的长度表示的内容）的度量，是客观存在且固定的物理距离，只是人们会用不同的单位去表达。而对于电子屏幕，使用的长度单位和方式，和一维世界是不同的。

对于当今的编程语言来说，长度是一个相对的概念。

3 相对长度单位

3.1 px

显示器成像是由无数个可以发出单一色彩的显像管组成，而这个最小的成像单位和长度，我们就称为——像素。而一台显示器，包含的有效像素，即称为——分辨率，通常使用宽、高的像素数量进行标示。理论上越大的分辨率，可以容纳的画面内容就越多（显示的内容更多、更清晰）。

px 被定义为相对单位，是因为它取决于显示器的分辨率。一旦分辨率确定，设置为 px 的尺寸就成为固定尺寸，不会自动缩放。

但，关于 px 我们还有以下信息需要掌握：

如果我们同时使用分辨率为 1920*1080 的两个屏幕，尺寸不一样，那么就出现了新的概念—— PPI ，即“每英寸包含的像素数量”（像素的密度单位，PPI 值越高，画面的细节就会越丰富）。

DPI ——是指输出分辨，针对输出设备而言的，每英寸包含的墨点数量。

⚠️所以，像素（px）在真实世界中的大小是不固定的。曾经，普通的显示器里，我们用像素就可以描述大多数的情况。但是，“视网膜屏幕 retina”诞生后，旧有平台的图像如果根据其实际像素在视网膜屏幕中显示时，字体、图标等就会变得特别小：

为了适应实际使用体验和兼容性，厂商发展出了“像素合并技术”（输出来的图像、文字比以前更细腻，因为可以显示的细节更多），过去 1px 的面积包含了更多的像素单位：

所以，很多时候直接使用 px 作为长度单位已经无法满足日常的需求，需要依具体情况而定。

?_在以后学习的移动端前端开发中，_ iOS 和安卓没有“像素”这个单位，我们用 PT/DP 来描绘在一个屏幕中各个元素的大小。

3.2 em

1em 被定义为一种给定字体的 font-size 值。

如下例，当 em 用于设置元素的 font-size 属性本身时，em 的值会相对于父元素的字体大小改变。

<body>回答问好<div class="div1">fine<div class="div2">thank you <div class="div3">and you?</div></div></div>
</body>
复制代码

div {font-size: 1.5em;
}
复制代码

计算关系是这样的：
回答问好 的 font-size 是继承自跟元素 html，html 的尺寸是浏览器默认尺寸 14px ；
fine 的 font-size=1.5 ✖️14px = 21px ；
thank you 的 font-size=1.5 ✖️21px = 31.5px ；
and you? 的 font-size=1.5 ✖️31.5px = 47.25px ；

如果手动设置 thank you 的 font-size 为 40px ，那么 and you? 的 font-size 应该为 1.5 ✖️40px = 60px 。

但，由于 em 的值会随元素的不同而发生变化，这给计算带来极大的困难。于是，就产生了 rem 这个相对单位。

3.3 rem

rem——root em 是相对于根元素 <html> 的字体大小单位。
例如还是上面的 html 代码，添加如下样式：

.div3 {font-size: 1.5rem;
}
复制代码

此时 and you? 的 font-size = 1.5 ✖️14px = 21px = 1.5 ✖️html 的 font-size 。

3.4 ex

ex 是一个相对长度单位，1ex 被定义为一种给定字体的小写字母 “x” 的高度。因此，这个值会随字体的不同而变化。
然而，很多浏览器都没有内置 ex 高度值，只是简单的取 em 的值，再取其一半作为 ex 的值。所以，一般不推荐使用 ex 这个长度单位。

3.5 视口单位 vw、vh、vmin、vmax

3.5.1 vw

视口宽度的1/100 。

3.5.2 vh

视口高度的1/100 。
例如，桌面端浏览器视口尺寸为 650px，那么 1vw = 650 * (1/100) = 6.5px (这是理论推算得出，一般浏览器不支持 0.5px，那么实际渲染结果可能是 7px)。

3.5.3 vmin

vw 和 vh 中的最小值。

3.5.4 vmax

vw 和 vh 中的最大值。
例如，浏览器的宽度设置为 1200px，高度设置为 800px， 1vmax = 1200/100px = 12px， 1vmin = 800/100px = 8px。如果宽度设置为 600px，高度设置为 1080px，1vmin 就等于 6px，1vmax 则为 10.8px。

后记： CSS 值和单位包含的面很广，细小的知识点还有很多，且各个单位也各有优缺点，需要在具体情况下酌情使用。不必一蹴而就，慢慢来，慢慢地把各个知识点击破。

加油！

转载于:https://juejin.im/post/5cb5bdfd6fb9a068b47b6f19