• 了解如何更灵活的调整元素尺寸大小

ch
控制文本大小基于0字符的宽度，可用于比如设置最大宽度

  1. p{
  2.   font-size: 1.25rem;
  3.   max-width: 70ch;
  4. }

这样设置意味着不论设置的文本字体大小为多少，这一块的宽度始终最多为70个字符宽。
它可以让你很方便地通过控制字体大小来限制一行的宽度，不论字体大小都能进行可预测的控制。

ch还有另一个规则：

  • 1ch = 1个英文 = 1个数字
  • 2ch = 1个中文

ch 是一个相对单位，所谓相对，意思是 ch 会根据当前容器的 font-size 变化而变化。
要注意的是，如果你使用的字体不是等宽字体，就可能显示的并不是你想要的效果。

数字单位（Number）

纯数字，不带单位的类型。
这意味着依赖上下文：

  1. p {
  2.   font-size: 16px;
  3.   line-height: 1.5;
  4. }

那么这里的行高就设置为 1.5*16px。这样设置数字而不不是指定单位——是一种非常常用且实用的方法，这意味着你能轻松保持相对字体大小的行高。

或者说，他本身所需要的属性值就是无单位的整数或小数：

  • 比如上一篇将颜色的文章里说到的rgb等等
    • 本来就是 0-255 的数字
    • 小数表示百分数：0.5 表示 50%
  • transform:scale(1.5) 表示 1.5 倍

百分比（Percentages ）

也是与上下文有关：要理解它是如何计算的

  1. div {
  2.   width: 100px;
  3. }
  4. div p{
  5.   width: 30%;
  6. }

此时 div中的p宽度就被计算为 100px*30% 与父元素宽度有关。
那么在 margin、padding中也是如此，都是父元素的百分之几。
而transform就不太一样，他是基于设置该属性的自身来计算的。——这也是一种实现居中的办法思路：
先设置其该元素左上角 到 屏幕正中间，然后再相对自身的 50% 平移回去。

长度单位

带单位又分为

绝对单位

我个人感觉是没有这么灵活的，自己常用的也就是px一个。但是如果是设计出来需要打印的东西绝对是更为可控。

单位 名字 转换
mm 毫米 1mm = 1/10 cm
cm 厘米 1cm = 96px/2.54
Q 四分之一毫米 1Q = 1/4mm
in 英尺 1in = 2.54cm = 96px
px 像素 1px = 1/96 in
pt 磅 1pt = 1/72 In
pc 活字 1pc = 1/6 in

相对单位

很多时候都是 响应式web设计 ，那么相对单位非常实用。
相对单位计算 类似百分比。
可以基于：

  • 文本字体大小
  • 视窗大小

字体大小(font-size)相对单位

em 相对父级字体大小 1.25em = 125% 父级字体大小
ex 字体小写的大小 对于大多数字体来说，1ex = 0.5em
cap 字体的上限高度，大写字母的高度
ch ‘0’字符的宽度
ic ‘水’字符的宽度
rem 相对根元素的字体大小（根元素默认为16px） 1.25rem = 125% * 16px
lh 相对与line-height
rlh 相对于根元素line-height

视口(Viewport)相对单位

视口单位与创建他的文档窗口有关，也就是说是可能与设备屏幕相同，也可能不同。

vw 相对视口宽度 1vw = 1% 视口宽度
vh 相对视口高度 1vh = 1% 视口高度
vi 相对视口内轴(inline-axis) 从左到右的写入模式中，内轴是水平的。1vi = 1%内轴长度度
vb 相对视口块轴(blocks-axis) 从左到右的写入模式中，块轴是垂直的。1vb = 1%块轴长度
vmin 相对视口的较小尺寸 较小尺寸=min(宽，高），1vmin = 1% 视口较小尺寸
vmax 相对视口的较长尺寸 较长尺寸=min(宽，高），1vmax = 1%视口较长尺寸
% 相对于父元素

多多使用相对单位可以使得内容大小响应用户，更为合适。
常用的有 ：

  • em
  • rem
  • vw
  • vh
  • vmin
  • vmax

    其他单位

    角度单位

    deg

    角度值的正常范围应在[0-360deg]内，例如：-10deg与350deg是等价的
    在 color 中也有用到，比如hsl中。另外还在一些图形变化中，比如：
    1. div {
    2. transform: rotate(180deg);
    3. }

其他不怎么常用的

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

分辨率单位

分辨率值不允许有负值。

dpi 每英寸包含点的数量（dots per inch）
dpcm 每厘米包含点的数量（dots per centimeter）
dppx 每像素包含点的数量（dots per pixel）

1dppx = 96dpi 1dpi ≈ 0.39dpcm 1dpcm ≈ 2.54dpi 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

普通屏幕通常包含 96 dpi ，一般将2倍于此的屏幕称之为高分屏，即大于等于 192 dpi 的屏幕，比如Mac视网膜屏就达到了 192 dpi（即 2dppx ），打印时一般会需要更大的dpi；
例子：

  1. @media screen and (min-resolution: 2dppx) { ... }
  2. @media screen and (min-resolution: 1dppx) and (max-resolution: 1.9dppx) { ... }

一般用于检测使用者是否具有高分辨率的屏幕来决定是否提供更高分辨率的图片。