CSS3 单位

px

像素单位 参照的媒介是计算机屏幕的分辨率。

<span style="font-size: 12px;"> o </span>
<span style="font-size: 13px;"> o </span>
<span style="font-size: 14px;"> o </span>
<span style="font-size: 15px;"> o </span>
<span style="font-size: 16px;"> o </span>
<span style="font-size: 17px;"> o </span>
<span style="font-size: 18px;"> o </span>

效果

o o o o o o o

%

百分比

<!-- chrome 浏览器字体的默认大小是 14px -->

<span style="font-size: 50%;"> 7px </span>
<span style="font-size: 100%;"> 14px </span>
<span style="font-size: 150%;"> 21px </span>

效果

7px 14px 21px

em

相对单位 相对点是父类的字体大小。

<p style="font-size: 10px;">
 <span style="font-size: 1em;"> 10px </span> <!-- 1 倍父字体大小-->
 <span style="font-size: 1.5em;"> 15px </span> <!-- 1.5 倍父字体大小 -->
 <span style="font-size: 2em;"> 20px </span> <!-- 2 倍父字体大小 -->
</p>

效果

10px 15px 20px


rem

相对单位 相对点是网页的初始字体大小。

<style type="text/css">
* {
 font-size: 10px; <!-- 修改初始化字体 10px -->
}
</style>

<span style="font-size: 1rem"> 10px </span> <!-- 1 倍初始化字体大小 -->
<span style="font-size: 1.5rem"> 15px </span> <!-- 1.5 倍初始化字体大小 -->
<span style="font-size: 2rem"> 20px </span> <!-- 2 倍初始化字体大小 -->

效果

10px 15px 20px

由于移动端的出现进入到了多屏的时代,相比于传统的 px 单位,em / rem 这些相对单位有更高的兼容性和更加灵活,当初始值变化,整个页面相关联的大小全部都会跟随变化。

CSS3 教程 CSS3 入门 CSS3 选择器 CSS3 颜色 CSS3 单位 CSS3 字体 CSS3 文本 CSS3 光标 CSS3 盒子模型 CSS3 边框 CSS3 边距 CSS3 列表 CSS3 表格 CSS3 背景 CSS3 效果 CSS3 浮动 CSS3 定位 CSS3 响应式 CSS3 Columns CSS3 Flex