本文详细介绍了CSS中的相对单位，包括em和rem的使用，强调了停止像素思维，利用相对单位实现响应式设计。rem作为相对于根元素的单位，简化了字号设置和响应式布局的实现。同时提到了视口单位vw和vh在填充屏幕布局中的应用，以及无单位数值在行高和CSS变量中的特殊用法。
绝对单位与相对单位
我们最熟悉同时也是最简单的是 像素单位(px)，它属于绝对单位，大小是固定的。
而其他单位，如em,rem等，这些属于 相对单位，相对单位的值会根据外部因素而发生变化。
2.1 相对值的好处
CSS为网页带来了**后期绑定（late-binding）**的样式，即在内容和样式都完成城后，二者才会结合起来，这样带来的好处是一个样式表可以作用于成千上百个网页，开发人员也能直接改变渲染效果。
在web环境下，用户可以设置浏览器窗口的大小，还可以缩放网页，所以，不能在刚创建网页时就应用样式，而是要将网页渲染到屏幕上时，才能去计算样式。
同时，随着高清显示器及手机的发展，开发人员无法做到每个用户访问网站的体验都能一样，这时候得抛弃那种固定宽度的栏目设计，转向响应式设计。
响应式——在CSS中指的是样式能够根据浏览器窗口的大小有不同的“响应”。这要求有意地考虑任何尺寸的手机、平板设备，或者桌面屏幕。
2.2 em和rem
2.2.1 em
em是最常见的相对单位长度，适合 基于特定的字号进行排版。CSS中，1em等于当前元素的字号，其准确值取决于作用元素。
.demo {
font-size:16px;
padding:1em;
}
上面的代码指定了元素的内边距为1em，浏览器将乘以字号（16px），最终渲染为16px。这一点很重要：浏览器会根据相对单位的值计算出绝对值，称作 计算值。
在设置padding,height,width,border-radius等属性时，使用em会很方便，这是因为当元素继承了不同的字号，或者用户改变字体设置时，这些属性都会跟着改变。
使用em定义字号时，font-size是根据继承的字号来决定的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-size: 16px;
}
.slogan {
/* 继承字号 16px*1.2=19.2px 等用于局部变量，影响padding值*/
font-size: 1.2em;
/* 继承字号 19.2px*1.2=23.04px */
padding: 1.2em;
}
</style>
</head>
<body>
We love basketball!
<p class="slogan">We love basketball!</p
最低0.47元/天 解锁文章
1102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
