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 和 ❙v 和 ❙v 以确保最小字体大小和 1vw 确保字体可以根据视口进行更改。可以保证基本字体大小从iPhone6中的11.75px到1200px屏幕

作者：zhangwin赢