如何精确控制响应式排版

2014年@Jason Pamental写了一篇博客详细介绍了Web排版的缩放。@Richard Rutter另一篇文章中介绍如何更好的表达你的排版。比如在一个Banner区,如何让文本显示的各为大气,又适合你的Web排版,如下图所示:

提出的思考

自从2010年响应式设计概念提出一直以来,在我的印象中:图片的响应式文本排版的响应式都是制约响应式应用的两大阻碍。虽然有很多热衷于响应式设计的设计师和开发人员都在致力于解决这方面的问题。但至目前为止,还未看到一套有关于图片响应式的文本排版响应式的最佳解决方案。

当然,你可能会说我说的比较片面,为什么呢?你肯定会说,对于图片的响应式不是有了<picture>标签和srcset属性了?这不是很好的解决方案吗?对于文本排版,可能会想到在不同的断点之下改变root元素htmlfont-size来做相应的处理。那么问题来了?这些真的是很好的解决方案?值得我们去思考一下。

那么今天我们来思考一下响应式的文本排版,也就是标题所说的:如何精确控制响应式排版

响应式排版的使用场景

简单的回忆一下响应式排版的使用场景,其实他的使用场景对于现代Web排版还是很常见的。比如@Richard Rutter在他的博文中所说的,怎么让Banner区域标题在不同的终端屏幕下显示得更为大器(文章开头的示意图)。特别是在移动端时代,都希望在面对不同的移动终端的时候,能让自己的排版更为合适,如下图所示:

为了能更好的做出响应式排版,@MikeRiethmuller提出了精准响应式排版的概念。对于这个概念我也是第一次听说。至于什么是精准响应式排版,我们先把这个概念放一放,先来看一段代码的截图:

上图中蓝色框框标出来的两段代码:

@media screen and (min-width: 20rem) {
    h3,.h3 {
        font-size: calc (1.266rem + .511 * (100vw - 20rem) / 100);
    }
}

这里面有几个很熟悉的东东,@mediaremvwcalc()。那么结合在一起,就有点让人摸不着头脑了。这些计算是怎么来的,它的原理是什么?难道这就是所谓精准响应式排版的出处吗?欲知其中之原委,看官请继续。

实现原理

既然实现“精确控制响应式排版”跟下面这段代码

@media screen and (min-width: 20rem) {
    h3,.h3 {
        font-size: calc (1.266rem + .511 * (100vw - 20rem) / 100);
    }
}

有着千丝万缕的关系,那么我们就有必要对代码做一个分析。在分析这段代码之前,有几个相关的概念需要先和大家一起聊聊。

@meida

@media在CSS Media Queries模块,也是CSS条件属性(Conditional CSS)之一。它也是响应式设计中必不可缺的属性,可以给@media传递相关参数,告诉浏览器选择对应的CSS规则。简单的理解就是在不同的断点下,渲染出不同的效果。这里就不对其做详细的阐述,如果感兴趣的话,可以点击这里进行了解。

calc()

calc()CSS Values and Units Module Level 3属性之一。它是CSS自带的函数功能,其最大功能就是可以帮助你做一些数学计算,比如:

width: calc( 100% - 20px);

可以很方便的帮助我们计算出width的值。特别是在一些流体布局中,比如上面的代码,我们需要在%值中减去一定的px值时,它让我们变得轻松。不过在使用calc()时有一个细节需要特别的注意,那就是在计算符的前后必须要有一个空格。当然,通过calc()在CSS中做一些数值运算,很多同这担心会影响页面的性能,对于这方面,我也没做过相关测试,在网上找了一圈,并没有找到相关的文章介绍,如果你比较擅长这方

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/responsive/precise-control-responsive-typography.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部