绝对单位与相对单位
我们最熟悉同时也是最简单的是 像素单位(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