css初始化代码-理解 CSS 字体单位并不困难：px、em、rem 和 %

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

对于绘图和彩色打印来说，“单位”非常重要，但在网页布局中，单位也同样重要。 自CSS3普及以来css初始化代码，增加了一些方便易用的单位（px、em、rem....等），本文将整理一下这个常用的CSS单位，希望能帮助大家更多的使用它以及您工作中的更多内容。

“Web”和“Print”单位

在我们目前接触的范围内，如果要区分单位，最简单的可以分为两类：“网页”和“打印”。 一般来说，CSS只能应用于网页的样式。 在做彩色打印的时候，我还是倾向于使用排版软件来设计。

网页（个）

网页（属性名称）

彩色印刷（简单理解）

示例展示

下面将显示不同单位的四个示例。 为了直观简单起见，四个示例均应用预设的 div 格式。 只需更改font-size即可看到差异，因为子元素如果不设置font-size，则会手动继承父元素的font-size，使用时应预先初始化。 下面两段CSS可以将所有元素的字体大小预设为16px，然后可以进行一些调整。

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

1. 像素

px是绝对单位，所以只要设置了px的数量，就会准确显示。 对于一些注重精确位置的布局非常有用。 如示例所示，字体将与指定的 px 一样大。

16px
 
20px
 
24px
 
16px
 
32px
 
 
 

2.em

em是相对单位，每个子元素乘以父元素的px值“倍数”，如果我们每层div都用1.2em，那么最外层就是16pxx1.2x1.2x1.2x1.2x1.2 =39.8 像素。 （浏览器默认字体大小为16px，如果不指定则直接继承父元素的字体大小）

1.2em
 
1.2em
 
1.2em
 
1.2em
 
1.2em
 
 
 

3. 雷姆

rem 是一个相对单位css初始化代码，它是根元素的 px 值乘以每个元素的“倍数”。 如果我们每层div都使用1.2rem，那么最外层就是16pxx1.2=19.2px。 （根元素指的是html的font-size，预设为16px）。

1.2rem
 
1.2rem
 
1.2rem
 
1.2rem
 
1.2rem
 
 
 

4.%

%ratio是相对单位，与em长治略有不同。 简单来说，em就是比率减一百。 如果我们每层div都使用120%，相当于1.2em，最外层就是16pxx1.2x1.2x1 .2x1.2x1.2=39.8px。

120%
 
120%
 
120%
 
120%
 
120%
 
 
 

5.小型、中型、大型……等。

字体大小属性有七个，分别是xx-small、x-small、small、medium、large、x-large和xx-large，不仅仅是x-small，其他六个对应h6~h1的标签文字大小分别是，根据W3C规范，在预设的介质尺寸16px的基础上（如果html字体的预设尺寸发生变化，介质也会相应变化），用固定的比例减去介质的尺寸，例如， xx-small 预设为 16pxx0.6=9.6 px（浏览器显示 12px）。

xx-small
 
x-small
 
small
 
medium
 
large
 
x-large
 
xx-large
 
 
 
 
 

6. 更大、更小

较大和较小是固定比例单位，较大的是父层的120%，较小的是父层的80%。

medium
 
larger
 
larger
 
larger
 
smaller
 
smaller
 
smaller
 
 
 
 
 

概括

熟悉了font size单位之后，你就能够系统地设计整个网站的CSS字体结构了，但是font-size本身就和font-family有一些复杂的关系，而且不同的font-family有时也会影响font-大小设置，所以使用的时候还是要注意一下！