Viewport Sized Typography với Kích thước Tối thiểu và Tối đa - Thủ thuật CSS

Khai báo kích thước phông chữ trong các đơn vị khung nhìn có thể tạo ra kết quả thực sự thú vị, nhưng nó đi kèm với những thách thức. Không có min-font-sizehoặc max-font-sizethuộc tính nào trong CSS, vì vậy rất khó giải quyết các trường hợp cạnh mà văn bản quá nhỏ hoặc quá lớn.

Mixin Sass này sử dụng các truy vấn phương tiện để xác định kích thước tối thiểu và tối đa cho phông chữ, tính bằng pixel. Nó cũng hỗ trợ một tham số tùy chọn để phục vụ như một dự phòng cho các trình duyệt không hỗ trợ đơn vị khung nhìn.

Ví dụ: đây là cách bạn xác định phông chữ 5vwbị giới hạn giữa 35pxvà 150px(với dự phòng 50pxcho các trình duyệt không hỗ trợ):

@include responsive-font(5vw, 35px, 150px, 50px);

Và đây là bản mixin đầy đủ:

/// /// Viewport sized typography with minimum and maximum values /// /// @author Eduardo Boucas (@eduardoboucas) /// /// @param (Number) $responsive - Viewport-based size /// @param (Number) $min - Minimum font size (px) /// @param (Number) $max - Maximum font size (px) /// (optional) /// @param (Number) $fallback - Fallback for viewport- /// based units (optional) /// /// @example scss - 5vw font size (with 50px fallback), /// minumum of 35px and maximum of 150px /// @include responsive-font(5vw, 35px, 150px, 50px); /// @mixin responsive-font($responsive, $min, $max: false, $fallback: false) ( $responsive-unitless: $responsive / ($responsive - $responsive + 1); $dimension: if(unit($responsive) == 'vh', 'height', 'width'); $min-breakpoint: $min / $responsive-unitless * 100; @media (max-#($dimension): #($min-breakpoint)) ( font-size: $min; ) @if $max ( $max-breakpoint: $max / $responsive-unitless * 100; @media (min-#($dimension): #($max-breakpoint)) ( font-size: $max; ) ) @if $fallback ( font-size: $fallback; ) font-size: $responsive; )