CSS进阶(一)：单位

1 CSS单位

1.1 绝对单位

• CSS单位分为两大类：绝对单位 和 相对单位。绝对单位使用的是物理度量单位，大小是固定的。在前端开发中一般不会用到绝对单位，了解即可。

绝对单位说明cm厘米mm毫米in英寸pt(poin)印刷的点数，磅pc(pica)1pc=12pt

1.2 相对单位

相对单位说明：

    px像素

    %百分比

    em当前元素字体大小的倍数

    rem根元素字体大小的倍数

一、px(像素)

• px（pixel）像素，是分辨率的基本单位，是屏幕显示最小的点。像素不像是厘米，属于物理上绝对的大小单位，它可以很大，也可以很小。
• 如果画面由很多且很小的显示点构成，那么画面就很清晰，我们称为“分辨率高”；相反，如果画面由很少且很大的显示点构成，“分辨率低”画面就模糊。
• 比如分辨率为“800px × 600px”，就是说计算机的显示由宽是800个像素点，高是600个像素点构成。

二、%(百分比)

• CSS中支持百分比作为单位的属性大致有三大类：
  • width、height、font-size根据父元素相同属性值来进行百分比计算：
    • 比如父元素的width:100px，那么子元素width:50%，则实际宽度为50px；
    • 比如父元素的font-size:30px，那么子元素font-size:50%，则实际字体大小为15px；
• • line-heigt根据父元素的font-size属性值来进行百分比计算；
  • vertical-align根据当前元素的line-heigt属性值来进行百分比计算；

三、em（当前元素字体大小的倍数）

• em是当前元素字体大小的百分比，例如当前元素的font-size:10px时，1em等于10px。
• 如果当前元素没有定义font-size，则会基础父元素的font-size。如果所有祖先元素都没定义font-size，则会继承浏览器默认的font-size(所有浏览器默认的font-size:16px)。

『em单位的使用技巧』

1. 实现首行缩进：text-indent:2em；
2. 使用em作为统一单位，任何元素都不设置具体的px单位，而是指定根元素的font-size的倍数。但值得注意的是，如果出现多重嵌套内容时，使用em作为单位则需要重新计算；
3. 使用em作为统一字体大小单位，当需要改变页面整体字体大小时，无需逐个修改，只改根元素的字体大小即可；

四、rem（根元素字体大小的倍数）——CSS3

• rem(font size of the root element)，相对于根元素字体大小的倍数。
• 浏览器兼容性：除了IE8以及更早版本之外，大部分主流浏览器都支持rem。
• rem布局也是移动端最常用的字体大小之一。
• rem的优势：em是相对于“当前元素”的字体大小，而rem是相对于“根元素”的字体大小，从而可以避免多重嵌套导致的复杂计算。

『实际开发中，px、em和rem各自的使用场景』

• 国外大多数网站都使用em作为单位，W3C也建议使用em。但国内大部分网站使用px作为单位。这是由于国外的法律规定（如美国）网站必须具有兼容性，为了方便对IE早期版本的兼容，em更适合。
• 所以：
  • 需要兼容IE或者其他低版本浏览器时，使用em单位；
  • 不需要兼容IE，也不考虑移动端浏览器时，使用px单位；
  • 需要在移动端且不考虑IE等比版本浏览器时，使用rem单位；

扫描二维码关注公众号，回复： 616337 查看本文章