html响应式排版,如何精确控制响应式排版

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

提出的思考

自从2010年响应式设计概念提出一直以来，在我的印象中:

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

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

响应式排版的使用场景

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

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

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

@media screen and (min-width: 20rem) {

h3,.h3 {

font-size: calc (1.266rem + .511 * (100vw - 20rem) / 100);

}

}

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

实现原理

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

@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中做一些数值运算，很多同这担心会影响页面的性能，对于这方面，我也没做过相关测试，在网上找了一圈，并没有找到相关的文章介绍，如果你比较擅长这方