前端开发入门到实战: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. px。

  mm:毫米,在96 dpi的系统上1 cm=3. px。

  示例展示

  以下将展示四种不同单位的示例,为公平起见,四个示例都套用预设的div格式,纯粹改变font-size看看有何不同,由于子元素若没有设定font-size,会自动继承父元素的font-size,使用上就应该要预先初始化字体大小,下面这两段CSS可以将所有的元素字体大小预设为16px,然后可个别进行调整。

  1. px

  px是绝对单位,因此只要设定多少px,就会精确的呈现,对于一些讲求精准位置的排版而言十分有用,如示例表示的,指定多大px字体就会多大。

  

  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,若无特别指定则会直接继承父元素字体大小)

  

  3. rem

  rem是相对单位,为每个元素透过“倍数”乘以根元素的px值,如果我们每一层div都使用1.2rem,最内层就会是16px x 1.2=19.2px。(根元素指的是html的font-size,预设为16px)

  

  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。

  

  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)。

  

  

  6. larger、smaller

  larger和smaller就是固定百分比为单位,larger为父层的120%,smaller为父层的80%。

  

  小结

  熟悉了字体大小单位之后,就更能有系统的设计整个网站的CSS构架,不过font-size本身和font-family有着一些复杂的关系,不同的font-family有时也会影响font-size的设定,因此使用上还是得稍微注意一下!

  自己是一个五年的前端工程师,希望本文对你有帮助!

  这里推荐一下我的前端学习交流扣qun: ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,每天分享技术

  点击:加入

  

  IT智云编程

  2019.08.15 14:37

  字数 1561

  对于绘图和印刷而言,“单位”相当重要,然而在网页排版里,单位也是同样具有重要性,在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. px。

  mm:毫米,在96 dpi的系统上1 cm=3. px。

  示例展示

  以下将展示四种不同单位的示例,为公平起见,四个示例都套用预设的div格式,纯粹改变font-size看看有何不同,由于子元素若没有设定font-size,会自动继承父元素的font-size,使用上就应该要预先初始化字体大小,下面这两段CSS可以将所有的元素字体大小预设为16px,然后可个别进行调整。

  1. px

  px是绝对单位,因此只要设定多少px,就会精确的呈现,对于一些讲求精准位置的排版而言十分有用,如示例表示的,指定多大px字体就会多大。

  

  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,若无特别指定则会直接继承父元素字体大小)

  

  3. rem

  rem是相对单位,为每个元素透过“倍数”乘以根元素的px值,如果我们每一层div都使用1.2rem,最内层就会是16px x 1.2=19.2px。(根元素指的是html的font-size,预设为16px)

  

  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。

  

  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)。

  

  

  6. larger、smaller

  larger和smaller就是固定百分比为单位,larger为父层的120%,smaller为父层的80%。

  

  小结

  熟悉了字体大小单位之后,就更能有系统的设计整个网站的CSS构架,不过font-size本身和font-family有着一些复杂的关系,不同的font-family有时也会影响font-size的设定,因此使用上还是得稍微注意一下!

  自己是一个五年的前端工程师,希望本文对你有帮助!

  这里推荐一下我的前端学习交流扣qun: ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,每天分享技术

  点击:加入

  对于绘图和印刷而言,“单位”相当重要,然而在网页排版里,单位也是同样具有重要性,在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. px。

  mm:毫米,在96 dpi的系统上1 cm=3. px。

  示例展示

  以下将展示四种不同单位的示例,为公平起见,四个示例都套用预设的div格式,纯粹改变font-size看看有何不同,由于子元素若没有设定font-size,会自动继承父元素的font-size,使用上就应该要预先初始化字体大小,下面这两段CSS可以将所有的元素字体大小预设为16px,然后可个别进行调整。

  1. px

  px是绝对单位,因此只要设定多少px,就会精确的呈现,对于一些讲求精准位置的排版而言十分有用,如示例表示的,指定多大px字体就会多大。

  

  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,若无特别指定则会直接继承父元素字体大小)

  

  3. rem

  rem是相对单位,为每个元素透过“倍数”乘以根元素的px值,如果我们每一层div都使用1.2rem,最内层就会是16px x 1.2=19.2px。(根元素指的是html的font-size,预设为16px)

  

  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。

  

  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)。

  

  

  6. larger、smaller

  larger和smaller就是固定百分比为单位,larger为父层的120%,smaller为父层的80%。

  

  小结

  熟悉了字体大小单位之后,就更能有系统的设计整个网站的CSS构架,不过font-size本身和font-family有着一些复杂的关系,不同的font-family有时也会影响font-size的设定,因此使用上还是得稍微注意一下!

  自己是一个五年的前端工程师,希望本文对你有帮助!

  这里推荐一下我的前端学习交流扣qun: ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,每天分享技术

  点击:加入

达到当天最大量