实现精准的流体排版原理

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

流体排版这一词似乎看上去有点陌生,在英文中常把他称之为Fluid Typography,当然也有很多朋友称之为流体字号(Fluid Size)。大概的意思就是Web排版中的font-size会根据浏览器窗口的大小自动改为。比如下图所示的一个效果:

看到上图的效果,大家首先可能会想到的是CSS中的Viewport单位vw或者vh之类,当然也可能会认为是通过媒体查询来改变元素font-size来实现的。事实上,他们都能实现类似的效果,但问题是我们想要精确的实现流体排版(根据视窗大小变化精确改变font-size的值),那并不是件容易的事情。那问题来了,我们有没有方法可以实现所谓的精准流体排版呢?答案是肯定的,接下来我们就要来探讨这方面的实现思路、细节以及使用到的一些数学公式。

实现思路

精准流体排版最核心的就是浏览器视窗大小改变时,font-size能够根据视窗的大小做到精准的变化。当用户收缩和拉大浏览器窗口时,其大小有一个变化,在CSS中,咱们通过把每一个大小点称为断点,断点也是媒体查询中一个重要的概念。除此之外,如果我们用Viewport单位来描述的话,视窗大小始终是100vw。如果font-size设置为2vw,那么其大小就是浏览器窗口宽度的2%,当窗口拉到1000px时,这个时候font-size对应的是20px

原理是不是很简单,而且其中还涉及到一些数学计算,CSS中动态计算的话,可以依赖calc()函数来进行计算,详细的使用方式可以点击这里

其实有关于这方面的介绍,在早期分享的文章中也或多或少的提到过:

为了方便大家使用,在Sassmagic仓库中,使用SCSS声明了一个混合宏

/// Fluid vertical rhythm and Fluid Modular scale
/// @param {string} $properties - CSS属性
/// @param {string} $min-vw - 视窗最小宽度(viewport min-width)
/// @param {string} $max-vw - 视窗最大宽度(viewport max-width)
/// @param {string} $min-value - 最小值
/// @param {string} $max-value - 最大值
@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
    & {
        @each $property in $properties {
            #{$property}: $min-value;
        }

        @media screen and (min-width: $min-vw) {
            @each $property in $properties {
                #{$property}: calc(#{$min-value} + #{strip-units($max-value - $min-value)} * ((100vw - #{$min-vw}) / #{strip-units($max-vw - $min-vw)}));
            }
        }

        @media screen and (min-width: $max-vw) {
            @each $property in $properties {
                #{$property}: $max-value;
            }
        }
    }
}

只需要这样调用:

$minScreen: 20rem; // $min-vw
$maxScreen: 50rem; // $max-vw
$minFont: .8rem; // $min-value
$maxFont: 2rem; // $max-value
:root {
    @include fluid-type(font-size, $minScreen, $maxScreen, $minFont, $maxFont);
}

就可以编译出:

:root {
    font-size: 0.8rem;
}
@media screen and (min-width: 20rem) {
    :root {
        font-size: calc(0.8rem + 1.2 * ((100vw - 20rem) / 30));
    }
}
@media screen and (min-width: 50rem) {
    :root {
        font-size: 2rem;
    }
}

既然前面都有多篇文章介绍过了,为何还需要花时间来整理这篇文章呢?正如文章开头所说,我们今天主要介绍一些细节和原理以及一些数学知识。在继续阅读下面的内容之前,需要特别感谢@Jake Wilson分享的博文:《CSS Poly Fluid Sizing using calc(), vw, breakpoints and linear equations》。这篇文章介绍了精准流体排版的一些细节以及用到的相关数学知识。接下来的文章中,将会直接使用@Jake Wilson文章中使用到的公式。

计算的演变过程与细节

假设页面中有一个h1的标题元素,希望在不同的断点之下有不一样的font-size,这样可以让我们阅读体验更友好。比如:

  • 在小屏幕下(Small:576px)标题h1font-size22px
  • 在中间屏幕下(Medium:768px)标题h1font-size24px
  • 在大屏幕下(Large:992px)标题h1font-size34px

前面也提到过了,改变font-size我们有多种方式。首先来看CSS媒体查询的实现方式:

h1 {
    font-size: 22px;
}
@media (min-width:576px) {
    h1 {
        font-size: 22px;
    }
}
@media (min-wid
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/css-polyfluidsizing-using-calc-vw-breakpoints-and-linear-equations.html

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

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