使用calc() + rem/vw单位实现弹性字体大小计算

字体大小也疯狂:用 calc()、rem 和 vw 玩转弹性排版 各位看官,咱们今天聊点儿有意思的,关于网页字体大小那些事儿。别一听字体就觉得枯燥,其实这玩意儿可深着呢。想想看,同样一个网站,你在手机上看着舒服,在电脑上可能就小的跟蚂蚁一样;反过来,你在大屏幕上觉得正好,到了小屏幕上就挤得你喘不过气。这都是字体大小没调好闹的。 传统的字体大小设置,要么用像素(px),要么用点数(pt),看似简单粗暴,但一遇到响应式设计,就抓瞎了。因为它们是绝对单位,不管屏幕大小怎么变,字体大小就死死地固定在那里,一点儿也不灵活。这就好比你穿了一件固定尺码的衣服,胖了勒得慌,瘦了又松垮垮的,怎么都不舒服。 这时候,相对单位就派上用场了。比如 em、rem 和 vw。其中,em 是相对于父元素的字体大小,rem 是相对于根元素(html)的字体大小,而 vw 则是相对于视口宽度。这几个家伙,各有各的脾气,用好了能让你的网站字体大小,像变形金刚一样,根据屏幕尺寸自动调整。 今天,咱们的主角就是用 calc() 函数,结合 rem 和 vw 这两个单位,来实现一种更高级的弹性字体大小计算方式。这玩意儿听起来有 …