Skip to content
On this page

相对单位

em

em 是常见的相对长度单位,是相对于 字号 进行排版的相对单位,如果规则集如下定义:.text{font-size: 16px;padding: 1em},那么,此时的 padding 会变成 16px,浏览器根据相对单位的值计算出绝对值,称作 计算值

可以用作不同大小的按钮,只要设置文本大小就能均匀放大按钮的宽高圆角边距,岂不美哉。

用 em 定义字号就有些特殊了,它肯定不会是自己计算自己的几倍,它会默认向上继承字号,如果找不到的话那就继承浏览器的默认值 16px 进行计算。

用 em 同时定义字号和其他属性,那就是先继承字号,然后根据继承的字号计算其他属性。

rem

em 设置字号的时候,如果搞不明白嵌套关系,有时候可能造成出人意料的效果,所以我们需要一个比较稳定的,只有一个参照系的相对单位,这就是 rem,或者说 root-em,会根据根元素的字号来决定属性的大小。

css
/* 等价于 html 标签选择器 */
:root {
    /* 浏览器默认值16px */
    font-size: 1em; 
}

p {
    /* 16px */
    font-size: 1rem;
}

还有根据浏览器视口定义长度的 视口的相对单位

概念解释:

  1. 视口:浏览器窗口内网页可见部分的边框区域,不包括浏览器的地址栏、工具栏、状态栏。
  2. vh:视口高度的 1/100。
  3. vw:视口宽度的 1/100。
  4. vmin:视口宽高中较小一个的 1/100。
  5. vmax:视口宽高中较大一个的 1/100。

vw 定义字号

以前我用的是媒体选择器,在某些断点上(比如 768px)文本大小会突然改变,有时候在边缘情况下是很不合理的,所以我们需要能平滑过渡的属性,这时候就可以用 vw 定义字号了,如果配合 calc(),更细致的计算字号那自然是更好,比如这么写 :root{font-size:calc(0.5em+1vw)},这样字体就能在浏览器灵活、平滑的缩放了,0.5em 保证了最小字号,1vw保证了随着视口缩放,在手机上大约是 12px,在电脑上能平滑过渡到 20px,这样就能省掉硬编码的断点,让网站内容随着视口大小的变化流畅的缩放。

line-height 定义行高

这是一个可以同时接收有单位数值和无单位数值的属性,加了单位就是固定行高,可能会带来令人困扰的页面,不加单位就是相对高度,假设 font-size: 10px,那么line-height:1.2 等价于行高 12px,更改字号也是同样,所以在这里使用相对单位能在大部分设备上都有个良好的体验。

Released under the MIT License.