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

2021年3月5日10:50:32 发表评论 63 views

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

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

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

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

font-size: 2vw;
复制代码

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

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

使用CSScalc函数结合emvw两个单位就能解决问题:

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

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

作者:zhangwinwin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: