长度单位

在 CSS 中的长度单位被分成两种，绝对长度单位与相对长度单位。绝对长度单位是固定的长度，不以任何参考物为参考。而相对长度单位会相对某一个参照物来决定自身的长度。

绝对长度单位

绝对长度单位表：

单位	名称	等价换算
cm	厘米	1cm = 96px/2.54
mm	毫米	1mm = 1/10th of 1cm
Q	四分之一毫米	1Q = 1/40th of 1cm
in	英寸	1in = 2.54cm = 96px
pc	十二点活字	1pc = 1/16th of 1in
pt	点	1pt = 1/72th of 1in
px	像素	1px = 1/96th of 1in

像素

我们最常使用的绝对长度单位是像素，因此这里仅仅介绍一下像素（px）单位。

一般来说，CSS 中设置的一个像素长度对应屏幕上一个像素点。但不绝对，手机屏幕的像素点与 CSS 中设置的像素就不是一一对应。

更深入地理解像素

我们的显示器设备都有一个像素分辨率，但我们设置的像素并不会一对一地显示到屏幕上，而是先经过 逻辑像素 → 渲染像素 → 物理像素 的转换。

一般在电脑显示上， 逻辑像素 等同于 渲染像素 ，而 渲染像素 等于我们设置的屏幕分辨率。当我们的设置的屏幕分辨率等同于设备 物理像素 时，我们设置的像素将会刚好一对一地显示到屏幕上。

$$tip

在初期只需有个简单理解就行，在日后的学习过程中再慢慢深入理解。

对于像素与分辨率有以下几个常常接触的概念：

物理像素（physical pixel）：屏幕上真实物理像素点数量，比如我们在网上购买显示器时，参数标明的像素值。
渲染像素（render pixel）：系统等设置的分辨率，对于 PC 来说，渲染像素就是显示设置中的分辨率。
逻辑像素（device point / device pixel / point ）：是为了调和距离不一样导致的差异，将所有设备根据距离，透视缩放到一个相等水平的观看距离之后得到的尺寸，是一个抽象的概念。我们设置 px 这个像素值时，对应的就是逻辑像素。对于电脑来说，逻辑像素一般等于渲染像素，而手机上逻辑像素通常远小于渲染像素。这使得我们的元素在手机上不至于显示得太小。
ppi（Pixels Per Inch）：每英寸所拥有的像素数，这个数值越高代表每英寸内的像素数越多，屏幕也越精细。
dpr（Device Pixel Ratio）：设备像素比 = 物理像素宽 / 逻辑像素宽 = 物理像素高 / 逻辑像素高。

$$tip

在 <head> 中包含以下代码，像素尺寸将会对应到逻辑像素上。需要适配手机端的网站都需要包含这段代码。

有关这段代码的详细解释，请看： What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0">

以下例子是将一个 <div> 宽设置为 200px，高设置为 100px，背景色设置为 pink。

相对长度单位

相对长度单位表：

单位	相对于
em	在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width
ex	字符“x”的高度
ch	数字“0”的宽度
rem	根元素的字体大小
lh	元素的line-height
vw	视窗宽度的1%
vh	视窗高度的1%
vmin	视窗较小尺寸的1%
vmax	视图大尺寸的1%
%	相对父元素的百分比

百分比

百分比可以使得我们针对父元素来设置长度，下例中把第二个 <div> 的宽高分别设置成了父元素宽高的 50%。

em

设置 em 用于字体大小时， 1em 等于父元素的字体大小，如果用于其他属性时 1em 等于自身的字体大小。

rem

1rem 等于根元素的字体大小，一般默认值是 16px 。

以下有一个例子，页面上的元素都以 rem 作为单位。因此可以通过调整 html 根元素的字体大小，来缩放整个页面的大小。

最常用的场景就是，通过 JavaScript 检测用户设备是电脑、还是平板或手机，然后调整html 根元素的字体大小，达到最佳的显示效果。

<div class="controls">
    <button onclick="scaleUp()">放大页面</button>
    <button onclick="scaleDown()">缩小页面</button>
</div>
<h1>三眼牛牛</h1>
<div class="name">三眼鸭的编程教室</div>
<div class="box"></div>
<style>
    .controls {
        font-size: 16px;
    }
    .name {
        width: max-content;

        padding: 1rem;
        background-color: pink;
    }
    .box {
        width: 5rem;
        height: 2rem;

        margin: 1rem 0;

        background-color: teal;
    }
</style>
<script>
    var fontSize = 16
    function scaleUp() {
        fontSize *= 1.2
        document.documentElement.style.fontSize = fontSize + "px"
    }

    function scaleDown() {
        fontSize /= 1.2
        document.documentElement.style.fontSize = fontSize + "px"
    }
</script>

$$demo <div class="controls"> <button onclick="scaleUp()">放大页面</button> <button onclick="scaleDown()">缩小页面</button> </div> <h1>三眼牛牛</h1> <div class="name">三眼鸭的编程教室</div> <div class="box"></div> <style> .controls { font-size: 16px; } .name { width: max-content;

    padding: 1rem;
    background-color: pink;
}
.box {
    width: 5rem;
    height: 2rem;

    margin: 1rem 0;

    background-color: teal;
}

</style> <script> var fontSize = 16 function scaleUp() { fontSize *= 1.2 document.documentElement.style.fontSize = fontSize + "px" }

function scaleDown() {
    fontSize /= 1.2
    document.documentElement.style.fontSize = fontSize + "px"
}

</script>

vw

1vw （view width）等于视窗宽度的 1%。

vh

1vh （view height）等于视窗高度的 1%。

该用什么单位？

场景	单位
大部分情况	px
响应式布局	px、rem、em、%
自适应布局	rem、em、%、vw、vh

响应式布局：页面元素在不同的设备或分辨率下内容位置不会发生大的变化，仅是内容大小发生改变，多见于一些手机的活动页面等对页面设计要求不高的场景。参考案例：http://m.ctrip.com/html5/
自适应式布局：页面元素在不同的设备或分辨率下内容版块、页面风格会发生较大的变化，通常用于对不同设备大小的设计有较高要求的场景。参考案例：https://www.jianshu.com/