对于绘图和印刷而言,"单位" 相当重要, 然而在网页排版里, 单位也是同样具有重要性, 在 CSS3 普及以来, 更支持了一些方便好用的单位 (px,em,rem... 等), 这篇文章将整理这些常用的 CSS 单位, 也帮助自己未来在使用上能更加得心应手.
"网页" 和 "印刷" 的单位
若要把单位做区隔, 最简单可以分为 "网页" 和 "印刷" 两大类, 通常对于 CSS 来说只会应用到网页的样式, 毕竟真正要做印刷, 还是会倾向透过排版软件来进行设计.
网页 (单位)
px: 绝对单位, 代表屏幕中每个「点」(pixel).
em: 相对单位, 每个子元素透过「倍数」乘以父元素的 px 值.
rem: 相对单位, 每个元素透过「倍数」乘以根元素的 px 值.
%: 相对单位, 每个子元素透过「百分比」乘以父元素的 px 值.
网页 (属性名称)
medium: 预设值, 等于 16px(h4 预设值)
xx-small:medium 的 0.6 倍 (h6 预设值)
x-small:medium 的 0.75 倍
small:medium 的 0.8 倍 (h5 预设值, W3C 定义为 0.89, 实测约为 0.8)
large:medium 的 1.1 倍 (h3 预设值, W3C 定义为 1.2, 实测约为 1.1)
x-large:medium 的 1.5 倍 (h2 预设值)
xx-large:medium 的 2 倍 (h1 预设值)
smaller: 约为父层的 80%
larger: 约为父层的 120%
印刷
pt: 打印机的每个「点」, 定义为 1 pt=1/72 in, 如果在 72 dpi 的系统上 1 px = 1 pt, 但如果在 96dpi 的系统上 1 px = 0.75 pt(72/96 = 0.75).
in: 英寸, 在 96 dpi 的系统上 1 in = 96 px.
cm: 厘米, 在 96 dpi 的系统上 1 cm = 37.795275593333 px.
mm: 毫米, 在 96 dpi 的系统上 1 cm = 3.7795275593333 px.
示例展示
以下将展示四种不同单位的示例, 为公平起见, 四个示例都套用预设的 div 格式, 纯粹改变 font-size 看看有何不同, 由于子元素若没有设定 font-size, 会自动继承父元素的 font-size, 使用上就应该要预先初始化字体大小, 下面这两段 CSS 可以将所有的元素字体大小预设为 16px, 然后可个别进行调整.
- html{
- font-size:16px;
- }
- HTML * {
- font-size: 1rem;
- }
- 1. px
px 是绝对单位, 因此只要设定多少 px, 就会精确的呈现, 对于一些讲求精准位置的排版而言十分有用, 如示例表示的, 指定多大 px 字体就会多大.
学习 Q-q-u-n: 731771211, 分享学习方法和需要注意的小细节, 不停更新最新的教程和学习技巧
- (从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
- <div style="font-size:16px;">16px
- <div style="font-size:20px;">20px
- <div style="font-size:24px;">24px
- <div style="font-size:16px;">16px
- <div style="font-size:32px;">32px</div>
- </div>
- </div>
- </div>
- </div>
2. em
em 是相对单位, 为每个子元素透过 "倍数" 乘以父元素的 px 值, 如果我们每一层 div 都使用 1.2em, 最内层就会是 16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px.(浏览器预设字体大小为 16px, 若无特别指定则会直接继承父元素字体大小)
- <div style="font-size:1.2em;">1.2em
- <div style="font-size:1.2em;">1.2em
- <div style="font-size:1.2em;">1.2em
- <div style="font-size:1.2em;">1.2em
- <div style="font-size:1.2em;">1.2em</div>
- </div>
- </div>
- </div>
- </div>
3. rem
rem 是相对单位, 为每个元素透过 "倍数" 乘以根元素的 px 值, 如果我们每一层 div 都使用 1.2rem, 最内层就会是 16px x 1.2 = 19.2px.(根元素指的是 HTML 的 font-size, 预设为 16px)
- <div style="font-size:1.2rem;">1.2rem
- <div style="font-size:1.2rem;">1.2rem
- <div style="font-size:1.2rem;">1.2rem
- <div style="font-size:1.2rem;">1.2rem
- <div style="font-size:1.2rem;">1.2rem</div>
- </div>
- </div>
- </div>
- </div>
4. %
% 百分比是相对单位, 和 em 大同小异, 简单来说 em 就是百分比除以一百, 如果我们每一层 div 都使用 120%, 就等同于 1.2em, 最内层就会是 16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px.
- <div style="font-size:120%;">120%
- <div style="font-size:120%;">120%
- <div style="font-size:120%;">120%
- <div style="font-size:120%;">120%
- <div style="font-size:120%;">120%</div>
- </div>
- </div>
- </div>
- </div>
5.small,medium,large... 等
字体大小的属性有七种, 分别是 xx-small,x-small,small,medium,large,x-large 和 xx-large, 除了 x-small, 其余六种分别对应 h6~h1 的标签文字大小, 根据 W3C 的规范, 以 medium 预设 16px 为基础 (若 HTML 字体预设大小改变, medium 也会跟着变), 使用固定的百分比乘以 medium 的大小, 例如 ss-small 预设为 16px x 0.6 = 9.6px(浏览器显示为 12px).
学习 Q-q-u-n: 731771211, 分享学习方法和需要注意的小细节, 不停更新最新的教程和学习技巧
- (从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
- <div style="font-size:xx-small;">xx-small
- <div style="font-size:x-small;">x-small
- <div style="font-size:small;">small
- <div style="font-size:medium;">medium
- <div style="font-size:large;">large
- <div style="font-size:x-large;">x-large
- <div style="font-size:xx-large;">xx-large</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
6. larger,smaller
larger 和 smaller 就是固定百分比为单位, larger 为父层的 120%,smaller 为父层的 80%.
- <div style="font-size:medium;">medium
- <div style="font-size:larger;">larger
- <div style="font-size:larger;">larger
- <div style="font-size:larger;">larger
- <div style="font-size:smaller;">smaller
- <div style="font-size:smaller;">smaller
- <div style="font-size:smaller;">smaller</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
小结
熟悉了字体大小单位之后, 就更能有系统的设计整个网站的 CSS 构架, 不过 font-size 本身和 font-family 有着一些复杂的关系, 不同的 font-family 有时也会影响 font-size 的设定, 因此使用上还是得稍微注意一下啰!
来源: http://www.jianshu.com/p/85082c049b1c