CSS 带rem的字体大小
示例
CSS3引入了一些新的单元,包括rem代表“rootem”的单元。让我们看看它是如何rem工作的。
首先,让我们看一下em和之间的区别rem。
em:相对于父字体的字体大小。这导致复利问题
rem:相对于根或<html>元素的字体大小。这意味着可以为html元素声明单个字体大小,并将所有rem单位定义为该百分比。
rem用于字体大小调整的主要问题是使用这些值有些困难。这是一些以rem单位表示的常见字体大小的示例,假设基本大小为16px:
10px=0.625rem
12px=0.75rem
14px=0.875rem
16px=1rem(基本)
18px=1.125rem
20px=1.25rem
24px=1.5rem
30px=1.875rem
32px=2rem
码:
html { font-size: 16px; } h1 { font-size: 2rem; /* 32px */ } p { font-size: 1rem; /* 16px */ } li { font-size: 1.5em; /* 24px */ }