CSS实践：使用视口单位定义字号

一般来说，构建响应式面板是使用媒体查询根据不同型号的屏幕尺寸，修改元素的字号就能渲染出不同大小的面板，当然前提是使用相对单位em或者rem。比如说:

@media (min-width: 800px) {
    :root{
        font-size: 0.875em;
    }
}
@media (min-width: 1200px) {
    :root{
        font-size: 1em;
    }
}
复制代码

根据给页面根元素设置不同字号，响应式地重新定义了整个页面的em和rem。但这属于硬编码的形式，只能响应设定的屏幕尺寸。

我们知道视口单位vm与vh是相对屏幕来说的，如果将视口单位用于设置字号，那比设置宽度还要实用

font-size: 2vw;
复制代码

设置上面属性会发生什么？当屏幕宽度为1440px时，字号就是28.8px了。在一个1920px的屏幕时，字号就变成了38.4px。这样做的好处就是元素能够在这两种大小之间平滑地过渡，不会在某个断点突然改变。

但还是有些问题， 常见的1920px屏幕中，38.4px的字号太大了。而在手机上比如iPhone6上就缩小到了7.5px，那就太小了。

使用CSS的calc函数结合em和vw两个单位就能解决问题：

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

0.5em保证了最小字号，1vw则确保了字体能随着视口缩放。能保证基础字号从iPhone6里的11.75px一直过渡到1200px屏幕的20px。