Kiểu chữ trôi chảy - Thủ thuật CSS

Bắt đúng mã, đây là một triển khai hoạt động:

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; ) )

Bạn nên xem bài đăng gần đây hơn của chúng tôi về Kiểu chữ đơn giản hóa chất lỏng để định cỡ kiểu thực tế, được kẹp, dựa trên khung nhìn.

Điều đó sẽ chia tỷ lệ font-sizetừ tối thiểu 16px (ở chế độ xem 320px) đến tối đa là 22px (ở chế độ xem 1000px). Đây là bản demo của điều đó, nhưng là một Sass @mixin (chúng tôi sẽ đề cập sau).

Xem Ví dụ về đế bút của Fluid Type w Sass của Chris Coyier (@chriscoyier) trên CodePen.

Sass được sử dụng chỉ để làm cho đầu ra đó dễ tạo hơn một chút, và thực tế là có một phần nhỏ liên quan đến toán học. Chúng ta hãy xem xét.

Sử dụng các đơn vị khung nhìn và calc(), chúng ta có thể điều chỉnh kích thước phông chữ (và các thuộc tính khác) dựa trên kích thước của màn hình. Vì vậy, thay vì luôn luôn có cùng một kích thước hoặc chuyển từ kích thước này sang kích thước khác trong các truy vấn phương tiện, kích thước có thể linh hoạt.

Đây là phép toán, ghi có Mike Riethmuller:

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

Lý do toán học hơi phức tạp là chúng tôi đang cố gắng tránh việc loại ngày càng nhỏ hơn mức tối thiểu hoặc lớn hơn mức tối đa của chúng tôi, điều này rất dễ thực hiện với các đơn vị khung nhìn.

Ví dụ: nếu chúng ta muốn kích thước phông chữ của mình trong một phạm vi, trong đó 14pxkích thước tối thiểu ở chiều rộng khung nhìn nhỏ nhất 300pxvà đâu 26pxlà kích thước tối đa ở chiều rộng khung nhìn lớn nhất 1600px, thì phương trình của chúng tôi trông như sau:

body ( font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); )

Văn bản thay đổi linh hoạt theo chiều rộng của khung nhìn

Xem Pen JEVevK bằng CSS-Tricks (@ css-trick) trên CodePen.

Để khóa các kích thước tối thiểu và tối đa đó, sử dụng phép toán này trong các truy vấn phương tiện sẽ hữu ích. Đây là một số Sass để giúp đỡ…

Trong Sass

Bạn có thể tạo một bản mixin (khá mạnh), như thế này:

@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; ) ) ) )

Mà bạn sử dụng như thế này:

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

Đây là một ví dụ khác của Mike, có được nhịp điệu uyển chuyển vừa phải:

Mở rộng Ý tưởng thành Tiêu đề với Quy mô mô-đun

Quy mô mô-đun, nghĩa là càng có nhiều không gian, kích thước khác nhau càng ấn tượng. Có lẽ ở chế độ xem lớn nhất với, mỗi tiêu đề trên hệ thống phân cấp lớn hơn 1,4 lần so với phần tiếp theo, nhưng nhỏ nhất, chỉ 1,05 lần.

Ngăm cảnh:

“Loại chất lỏng” i̶n̶s̶p̶i̶r̶e̶d̶ bị đánh cắp từ @MikeRiethmuller hiện đã xuất hiện trên blog @CodePen. Bao gồm "Quy mô mô-đun chất lỏng!" pic.twitter.com/0yJk8Iq8fR

- Chris Coyier (@chriscoyier) ngày 27 tháng 10 năm 2016

Với hỗn hợp Sass của chúng tôi, điều đó trông giống như:

$mod_1: 1.2; // mobile $mod_2: 1.5; // desktop h1 ( 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); )