特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
流体排版这一词似乎看上去有点陌生,在英文中常把他称之为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
)标题h1
的font-size
是22px
- 在中间屏幕下(Medium:
768px
)标题h1
的font-size
是24px
- 在大屏幕下(Large:
992px
)标题h1
的font-size
是34px
前面也提到过了,改变font-size
我们有多种方式。首先来看CSS媒体查询的实现方式:
h1 {
font-size: 22px;
}
@media (min-width:576px) {
h1 {
font-size: 22px;
}
}
@media (min-wid
如需转载,烦请注明出处:https://www.w3cplus.com/css/css-polyfluidsizing-using-calc-vw-breakpoints-and-linear-equations.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!