CSS响应式布局 – 小涵的笔记

em和rem

em是最常见的相对长度单位，适合基于特定的字号进行排版。在CSS中，1em等于当前元素的字号，其准确值取决于作用的元素。

.padded {
    font-size: 16px;
    padding: 1em; //浏览器将其乘以字号，最终渲染为16px
}

浏览器会根据相对单位的值计算出绝对值，称作计算值。当设置padding、height、width、border-radius等属性时，使用em会很方便。这是当元素继承了不相同的字号，这些属性会跟着元素均匀的缩放。

使用em定义字号

前面说到，当前元素的字号决定了em，如果声明font-size: 1.2em，一个字号怎么等于自己的1.2倍？——实际上，font-size是根据继承的字号来计算的。

// html
<body>
    Body text
    <p class="text">paragraph text</p>
</body>
// css
body {
    font-size: 16px;
}
.text {
    font-size: 1.2em; // 计算结果为元素继承的字号的1.2倍
}

使用rem设置字号

在文档中，根节点是所有其他元素的祖先节点。根节点有一个伪类选择类(:root)，可以用来选中自己。

rem是root em的缩写，rem是相对于根元素的单位

vh、vw、vmin和vmax

em和rem都是相对于font-size定义的，但CSS中不只有这一种相对单位，还有相对于浏览器视口定义长度的视口的相对单位。
视口：浏览器中窗口里网页可见部分的边框区域，不包括地址栏、工具栏和状态栏。

vh：视口高度的1/100
vw：视口宽度的1/100
vmin：视口宽、高中较小一方的1/100（IE9中叫vm，而不是vmin）
vmax：视口宽、高中较大一方的1/100

比如，50vw等于视口宽度的一半。

// 定义正方形
.square {
   width: 90vmin;
   height: 90vmin;
}

使用vw定义字号——如果给一个元素加上font-size: 2vw，在一个1200px的显示器上，计算值为24px（1200*2%）。这么做的好处在于元素能够在两种大小之间平滑的过渡，不会在某个断点突然改变。当视口大小改变时，元素会逐渐过渡。

使用calc()

calc()函数内可以对两个及其以上的值进行基本运算（加减乘除），加号和减号两边必须有空白。

:root {
    font-size: calc(0.5em + 1vw);
}

0.5em保证了最小字号，1vw确保了字体随着视口缩放。

媒体查询 @media

我们可以根据屏幕尺寸，用媒体查询改变根元素的字号

:root {
    font-size: 0.75em; // 作用到所有屏幕上
}

@media (min-width: 800px) {
    :root {
        font-size: 0.875em; // 仅作用于宽度800px及以上的屏幕，覆盖以前的值
    }
}

@media (min-width: 1200px) {
    :root {
        font-size: 0.875em; // 仅作用于宽度1200px及以上的屏幕，覆盖前面两个的值
    }
}