原创:itsOli @前端一万小时
本文首发于公众号「前端一万小时」
本文版权归作者所有,未经授权,请勿转载!
本文节选自“语雀”私有付费专栏「前端一万小时 | 从零基础到轻松就业」
❗️❗️❗️
以下链接为本文最新勘误篇章——《CSS 值和单位》
1. 你有没有使用过视网膜分辨率的图形?当中使用什么技术?
2. px,em,rem,vw 有什么区别?
🙋上方面试题“参考答案详解”,请点击此处查看获取方式!
前言: 本篇也是一篇纯基础、纯理论文章,但重要性毋庸置疑。
在利用 CSS 能做的几乎所有工作中,其基础都是“单位”,这是影响所有属性的“颜色”、“距离”和“大小”的一种元素。如果理解了本篇介绍的相关知识,你就能更快地学习和使用 CSS 的余下内容。
1 指定颜色
对于“颜色”的学习,让我们先认真复习文章:《用李涛高手之路前 3 节课开启我们光与色的大门 | Web 前置知识》。
在此篇基础上,我们可以很轻松的认识到:一个 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 的值会相对于父元素的字体大小改变。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>前端一万小时</title>
</head>
<body>
回答问好
<div class="div1">fine
<div class="div2">thank you
<div class="div3">and you?</div>
</div>
</div>
</body>
</html>
div {
font-size: 1.5em;
}
计算关系是这样的:
-
回答问好
的 font-size 是继承自根元素<html>
,<html>
的尺寸是浏览器默认尺寸 16px; -
fine
的 font-size = 1.5*16px = 24px; -
thank you
的 font-size = 1.5*24px = 36px; -
and you?
的 font-size = 1.5*36px = 54px。
如果手动设置 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 * 16px = 24px = 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 值和单位包含的面很广,细小的知识点还有很多,且各个单位也各有优缺点,需要在具体情况下酌情使用。不必一蹴而就,慢慢来,慢慢地把各个知识点击破。
祝好,qdywxs ♥ you!