1. 首页
  2. IT资讯

一次搞懂CSS 字体单位:px、em、rem 和 %

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F85d78e59db244be1b9dc2acb25e54d01″ img_width=”750″ img_height=”330″ alt=”一次搞懂CSS 字体单位:px、em、rem 和 %” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E对于绘图和印刷而言,「单位」很相当重要的,然而在网页排版里,单位也是同样具有重要性,在CSS3 普及以来,更添加了一些方便好用的单位( px、em、rem.. .等),这篇文章将整理这些常用的CSS 单位,希望能够帮助到你在工作上能使用的更加得心应手。u003Cu002Fpu003Eu003Ch1u003E「网页」和「印刷」的单位u003Cu002Fh1u003Eu003Cpu003E目前我们接触的范围来说,若要把单位做区分,最简单可以分为「网页」和「印刷」两大类,通常对于CSS来说只会应用到网页的样​​式,毕竟真正要做印刷,还是会倾向通过排版软体来进行设计。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E网页( 单位 )u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Culu003Eu003Cliu003Epx:绝对单位,代表屏幕中每个「点」( pixel )。u003Cu002Fliu003Eu003Cliu003Eem:相对单位,每个子元素通过「倍数」乘以父元素的px值。u003Cu002Fliu003Eu003Cliu003Erem:相对单位,每个元素通过「倍数」乘以根元素的px值。u003Cu002Fliu003Eu003Cliu003E%:相对单位,每个子元素通过「百分比」乘以父元素的px值。u003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003Eu003Cstrongu003E网页( 属性名称 )u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Culu003Eu003Cliu003Emedium:预设值,等于16px ( h4预设值)u003Cu002Fliu003Eu003Cliu003Exx-small:medium的0.6倍( h6预设值)u003Cu002Fliu003Eu003Cliu003Ex-small:medium的0.75倍u003Cu002Fliu003Eu003Cliu003Esmall:medium的0.8倍( h5预设值,W3C定义为0.89,实测约为0.8 )u003Cu002Fliu003Eu003Cliu003Elarge:medium的1.1倍( h3预设值,W3C定义为1.2,实测约为1.1 )u003Cu002Fliu003Eu003Cliu003Ex-large:medium的1.5倍( h2预设值)u003Cu002Fliu003Eu003Cliu003Exx-large:medium的2倍( h1预设值)u003Cu002Fliu003Eu003Cliu003Esmaller:约为父层的80%u003Cu002Fliu003Eu003Cliu003Elarger:约为父层的120%u003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003Eu003Cstrongu003E印刷(简单了解下)u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Culu003Eu003Cliu003Ept:印刷机的每个「点」,定义为1 pt = 1u002F72 in,如果在72 dpi的系统上1 px = 1 pt,但如果在96 dpi的系统上1 px = 0.75 pt ( 72 u002F96 = 0.75 )。u003Cu002Fliu003Eu003Cliu003Ein:英寸,在96 dpi的系统上1 in = 96 px。u003Cu002Fliu003Eu003Cliu003Ecm:厘米,在96 dpi的系统上1 cm = 37.795275593333 px。u003Cu002Fliu003Eu003Cliu003Emm:毫米,在96 dpi的系统上1 mm = 3.7795275593333 px。u003Cu002Fliu003Eu003Cu002Fulu003Eu003Ch1u003E示例展示u003Cu002Fh1u003Eu003Cpu003E以下将展示四种不同单位的示例,为了直观简单,四个示例都套用预设的div格式,纯粹改变font-size看看有何不同,由于子元素若没有设定font-size,会自动继承父元素的font-size,使用上就应该要预先初始化字体大小,下面这两段CSS可以将所有的元素字体大小预设为16px,接下来可以进行个别调整。u003Cu002Fpu003Eu003Cpreu003Ehtml{u003Cbru003E font-size:16px;u003Cbru003E}u003Cbru003Ehtml * {u003Cbru003E font-size: 1rem;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E1、pxu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Epx 是绝对单位,因此只要设定多少px,就会精确的呈现,对于一些讲求精准位置的排版而言十分有用,如示例展示的,指定多大 px 字体就会多大。u003Cu002Fpu003Eu003Cpreu003E<div style=”font-size:16px;”>16pxu003Cbru003E <div style=”font-size:20px;”>20pxu003Cbru003E <div style=”font-size:24px;”>24pxu003Cbru003E <div style=”font-size:16px;”>16pxu003Cbru003E <div style=”font-size:32px;”>32px<u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E<u002Fdiv>u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002Fb4d61e33e1824c95bdf7240e7132eee5″ img_width=”244″ img_height=”266″ alt=”一次搞懂CSS 字体单位:px、em、rem 和 %” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E2、emu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eem是相对单位,为每个子元素通过「倍数」乘以u003Cstrongu003E父元素u003Cu002Fstrongu003E的px值,如果我们每一层div都使用1.2em,最内层就会是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。(浏览器预设字体大小为16px,若无特别指定则会直接继承父元素字体大小)u003Cu002Fpu003Eu003Cpreu003E<div style=”font-size:1.2em;”>1.2emu003Cbru003E <div style=”font-size:1.2em;”>1.2emu003Cbru003E <div style=”font-size:1.2em;”>1.2emu003Cbru003E <div style=”font-size:1.2em;”>1.2emu003Cbru003E <div style=”font-size:1.2em;”>1.2em<u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E<u002Fdiv>u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F35873aee5ca84bc496de11e0e3a45773″ img_width=”244″ img_height=”315″ alt=”一次搞懂CSS 字体单位:px、em、rem 和 %” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E3、remu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Erem是相对单位,为每个元素通过「倍数」乘以u003Cstrongu003E根元素u003Cu002Fstrongu003E的px值,如果我们每一层div都使用1.2rem,最内层就会是16px x 1.2 = 19.2px。(根元素指的是html的font-size,预设为16px )。u003Cu002Fpu003Eu003Cpreu003E<div style=”font-size:1.2rem;”>1.2remu003Cbru003E <div style=”font-size:1.2rem;”>1.2remu003Cbru003E <div style=”font-size:1.2rem;”>1.2remu003Cbru003E <div style=”font-size:1.2rem;”>1.2remu003Cbru003E <div style=”font-size:1.2rem;”>1.2rem<u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E<u002Fdiv>u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002Feb1d369c78724edd8f68bee5ff334810″ img_width=”243″ img_height=”249″ alt=”一次搞懂CSS 字体单位:px、em、rem 和 %” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E4、%u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E%百分比是相对单位,和em大同小异,简单来说em就是百分比除以一百,如果我们每一层div都使用120%,就等同于1.2em,最内层就会是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。u003Cu002Fpu003Eu003Cpreu003E<div style=”font-size:120%;”>120%u003Cbru003E <div style=”font-size:120%;”>120%u003Cbru003E <div style=”font-size:120%;”>120%u003Cbru003E <div style=”font-size:120%;”>120%u003Cbru003E <div style=”font-size:120%;”>120%<u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E<u002Fdiv>u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F61253391afed408b93784351a2e29b34″ img_width=”244″ img_height=”313″ alt=”一次搞懂CSS 字体单位:px、em、rem 和 %” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E5、small、medium、large…等u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E字体大小的属性有七种,分别是xx-small、x-small、small、medium、large、x-large和xx-large,除了x-small,其余六种分别对应h6~h1的标签文字大小,根据W3C的规范,以medium预设16px为基础(若html字体预设大小改变,medium也会跟着变),使用固定的百分比乘以medium的大小,例如xx-small预设为16px x 0.6 = 9.6px(浏览器显示为12px )。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002Fd6337575691d4cadb439f66ef3ebe7ea” img_width=”700″ img_height=”161″ alt=”一次搞懂CSS 字体单位:px、em、rem 和 %” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpreu003E<div style=”font-size:xx-small;”>xx-smallu003Cbru003E <div style=”font-size:x-small;”>x-smallu003Cbru003E <div style=”font-size:small;”>smallu003Cbru003E <div style=”font-size:medium;”>mediumu003Cbru003E <div style=”font-size:large;”>largeu003Cbru003E <div style=”font-size:x-large;”>x-largeu003Cbru003E <div style=”font-size:xx-large;”>xx-large<u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E<u002Fdiv>u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F0425b8b4d5d9460a9fd16e42f258211d” img_width=”667″ img_height=”386″ alt=”一次搞懂CSS 字体单位:px、em、rem 和 %” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E6、larger、smalleru003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Elarger 和smaller 就是固定百分比为单位,larger 为u003Cstrongu003E父层的u003Cu002Fstrongu003E120%,smaller 为u003Cstrongu003E父层的u003Cu002Fstrongu003E80%。u003Cu002Fpu003Eu003Cpreu003E<div style=”font-size:medium;”>mediumu003Cbru003E <div style=”font-size:larger;”>largeru003Cbru003E <div style=”font-size:larger;”>largeru003Cbru003E <div style=”font-size:larger;”>largeru003Cbru003E <div style=”font-size:smaller;”>smalleru003Cbru003E <div style=”font-size:smaller;”>smalleru003Cbru003E <div style=”font-size:smaller;”>smaller<u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E<u002Fdiv>u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fc1db578cde2b4d06913391fab27090a4″ img_width=”663″ img_height=”357″ alt=”一次搞懂CSS 字体单位:px、em、rem 和 %” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E小结u003Cu002Fh1u003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fdfic-imagehandleru002F9fa6d4df-7c03-4087-bbe2-fa81464a1b15″ img_width=”1023″ img_height=”681″ alt=”一次搞懂CSS 字体单位:px、em、rem 和 %” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E熟悉了字体大小单位之后,你就更够能有系统的进行设计整个网站的CSS字体架构,不过font-size 本身和font-family 有着一些复杂的关系,不同的font-family 有时也会影响font-size 的设定,因此使用上还是得稍微注意一下啰!u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:一次搞懂CSS 字体单位:px、em、rem 和 %

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/10732.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code