第五篇 css - 单位值

css 单位

css 单位主要分为

   1、相对单位
   
   2、绝对单位

相对单位

相对单位，是相对于当前元素的字号 font-size 或者视口 viewport 尺寸。

1、em: 1em 与当前元素的字体大小相同（更具体地说，一个大写字母 M 的宽度）

  CSS 样式被应用之前，浏览器给网页设置的 默认基础字体大小 是 16像素，这意味着对一个元素来说 1em 的计算值默认为 16 像素。
  
  但是要小心 —em 单位是会继承父元素的字体大小，所以如果在父元素上设置了不同的字体大小，em 的像素值就会变得复杂。

   em 是 Web 开发中最常用的相对单位，相对于父元素的字体大小设置
   
2、ex 和 ch: 分别是小写 x 的 高度 和数字 0 的宽度。这些并不像 em 那样被普遍使用或很好地被支持。

3、rem: REM（root em）和 em 以同样的方式工作，但它总是等于 默认基础字体大小 的尺寸

   继承的字体大小将不起作用，所以这听起来像一个比 em 更好的选择，虽然在旧版本的IE上不被支持

   rem 相对于根元素字体大小

4、vw 和 vh: 分别是 视口宽度 的 1/100 和 视口高度 的 1/100，其次，它不像 rem 那样被广泛支持

   vw、vh、vmin、vmax 都属于 相对视口单位

使用相对单位是非常有用的-你可以相对于你的字体或视口大小来调整 HTML 元素的大小，这意味着，假设整个网站上的文本大小被视力障碍用户调整为原来的两倍，而网站的布局仍将保持正确

绝对单位

像素 (px) 也可以理解为 绝对单位（absolute units）， 因为无论其他相关的设置怎么变化，像素指定的值是不会变化的

其他的绝对单位如下：

mm, cm, in: 毫米（Millimeters），厘米（centimeters），英寸（inches）

pt, pc: 点（Points (1/72 of an inch)）， 十二点活字（ picas (12 points.)）

其他单位 %（百分比）

% 百分比 一般来说就是相对于父元素

  1、对于普通定位元素就是我们理解的父元素

  2、对于 position: absolute 的元素是相对于已定位的父元素

  3、对于 position: fixed 的元素是相对于 ViewPort 可视窗口

最常用的 px

像素（Pixel）,相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的

屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。

如何使 1rem = 10px ？

设置 HTML{font-size：62.5%；} 即可