1. 首页
  2. css

CSS流体排版

直接看代码,这里有一个可行的实现:

html {font-size: 16px;}@media screen and (min-width: 320px) {html {font-size: calc(16px + 6 * ((100vw - 320px) / 680));}}@media screen and (min-width: 1000px) {html {font-size: 22px;}}

值得一看我们最近简化后的流体排版,以获得实用的、钳制的、基于视口的字体大小。

它可以将font-size从最小的16px(在320px视口)缩放到最大的22px(在1000px视口)。这是一个演示,但是作为一个Sass@mixin(我们将在后面介绍)。

Sass的使用只是为了使输出更容易生成,而且还涉及到一些数学问题。让我们看看。

使用viewport units和calc(),我们可以让字体大小(和其他属性)根据屏幕大小调整大小。因此,与其总是保持相同的大小,或在媒体查询时从一个大小跳到下一个大小,大小可以是流动的。

这是数学,请相信迈克·里斯穆勒:

body {font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));}

数学有点复杂的原因是,我们试图避免类型小于最小值或大于最大值,使用视口单位很容易做到这一点。

例如,如果我们希望字体大小在一个范围内,其中14px是最小视口宽度300px时的最小大小,而26px是最大视口宽度1600px时的最大大小,然后我们的公式是这样的:

body {font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
文本流畅地更改为视口的宽度

以锁定这些最小和最大大小,在媒体查询中使用此数学方法会有所帮助。这里有一些Sass可以帮助你……

在Sass中,你可以做一个(非常健壮的)混合,像这样:

@function strip-unit($value) {@return $value / ($value * 0 + 1);}@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {$u1: unit($min-vw);$u2: unit($max-vw);$u3: unit($min-font-size);$u4: unit($max-font-size);@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {& {font-size: $min-font-size;@media screen and (min-width: $min-vw) {font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));}@media screen and (min-width: $max-vw) {font-size: $max-font-size;}}}}

你这样使用:

$min_width: 320px;$max_width: 1200px;$min_font: 16px;$max_font: 24px;html {@include fluid-type($min_width, $max_width, $min_font, $max_font);}

这里是另一个Mike的例子,让流畅的节奏恰到好处:

<模块化比例

模块化比例,意味着可用空间越多,尺寸差异越大。可能在最大的视口中,层次结构上的每个标题都比下一个标题大1.4倍,但在最小的视口中,只有1.05倍。

请参见视图:

\”Fluid Type\”i̶n̶s̶p̶i̶r̶e̶d̶从@MikeRiethmuller偷来的内容现在生活在@CodePen博客上。包括\”流体模数秤!\”pic.twitter.com/0yJk8Iq8fR

-Chris Coyier(@chriscoyier)2016年10月27日,这看起来像:

$mod_1: 1.2; // mobile$mod_2: 1.5; // desktoph1 {font-size: $mod_1*$mod_1*$mod_1*$mod_1 *1rem;@include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font);}h2 {font-size: $mod_1*$mod_1*$mod_1 *1rem;@include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font);}h3 {font-size: $mod_1*$mod_1 *1rem;@include fluid-type($min_width, $max_width, $mod_1*$mod_1 *$min_font, $mod_2*$mod_2 *$min_font);}

其他阅读

  • Tim Brown的带有CSS锁的灵活排版
  • <Get the Balance Right:Responsive Display Text by Richard Rutter
  • Mike Riethmuller的Fluid type examples
    • CSS流体排版 为WP2原创文章,链接:https://www.wp2.cn/css/css%e6%b5%81%e4%bd%93%e6%8e%92%e7%89%88/

发表评论

您的电子邮箱地址不会被公开。