web前端入门到实战:CSS中字体单位:px、em、rem和%

对于绘图和印刷而言,“单位”相当重要,然而在网页排版里,单位也是同样具有重要性,在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
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值