摘要：网页单位绝对单位，代表屏幕中每个点。相对单位，每个元素透过倍数乘以根元素的值。和就是固定百分比为单位，为父层的，为父层的。
对于绘图和印刷而言，“单位”相当重要，然而在网页排版里，单位也是同样具有重要性，在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字体就会多大。
16px20px24px16px32px
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，若无特别指定则会直接继承父元素字体大小）
1.2em1.2em1.2em1.2em1.2em
3. rem
rem是相对单位，为每个元素透过“倍数”乘以根元素的px值，如果我们每一层div都使用1.2rem，最内层就会是16px x 1.2 = 19.2px。（根元素指的是html的font-size，预设为16px）
1.2rem1.2rem1.2rem1.2rem1.2rem
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。
120%120%120%120%120%
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）。
xx-smallx-smallsmallmediumlargex-largexx-large
6. larger、smaller
larger和smaller就是固定百分比为单位，larger为父层的120%，smaller为父层的80%。
mediumlargerlargerlargersmallersmallersmaller
小结
熟悉了字体大小单位之后，就更能有系统的设计整个网站的CSS构架，不过font-size本身和font-family有着一些复杂的关系，不同的font-family有时也会影响font-size的设定，因此使用上还是得稍微注意一下啰！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114468.html
摘要：在平时的工作当中，我发现自己大多数时候是用来作为字体单位的，不仅如此，其实公司的所有前端项目都是以作为字体单位的。我们知道像素作为相对长度单位是相对于显示器的分辨率而言的。很好地解决了的字体大小从父元素继承所带来的不便。 px 在平时的工作当中，我发现自己大多数时候是用px来作为CSS字体单位的，不仅如此，其实公司的所有前端项目都是以px作为CSS字体单位的。我们知道px（像素）作为C...
摘要：所以未经调整的浏览器都符合。原因可能是处理汉字时，对于浮点的取值精确度有限。是新增的一个相对单位，根。目前，除了及更早版本外，所有浏览器均已支持。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。 单位转换工具 点我 px px是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)...
摘要：引自手册是相对长度单位。所有未经调整的浏览器都符合。特点是新增的一个相对单位，根，这个单位引起了广泛关注。目前，除了及更早版本外，所有浏览器均已支持。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。 在他处看到一篇好文章，想记录在自己的学习笔记中，原文作者看到我转载若是介意，联系我立马就删除，附上原文链接：http://www.huolg.net/html5/htm...
摘要：是相对长度单位。相对于当前对象内文本的字体尺寸。引自手册特点是新增的一个相对单位，根，这个单位引起了广泛关注。目前，除了及更早版本外，所有浏览器均已支持。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。 国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？ PX特点 IE无法调整那些使用px作为单位的字体大小； ...
阅读 3541·2021-09-24 09:48
阅读 1042·2021-09-10 10:51
阅读 3245·2019-08-30 13:03
阅读 3277·2019-08-30 12:51
阅读 1366·2019-08-30 11:22
阅读 1018·2019-08-29 18:38
阅读 2012·2019-08-29 16:41
阅读 3089·2019-08-29 15:32
