Trang này được dịch bởi Cloud Translation API.

CSS min(), max() và clamp()

Tìm hiểu cách kiểm soát kích thước phần tử, duy trì khoảng cách thích hợp và triển khai kiểu chữ linh hoạt bằng các hàm CSS được hỗ trợ tốt này.

Una Kravets

Khi thiết kế đáp ứng ngày càng tinh vi hơn, CSS không ngừng phát triển để cung cấp tác giả đã nâng cao quyền kiểm soát. min(), max() và clamp() hiện được hỗ trợ trên tất cả các trình duyệt hiện đại, là một trong những công cụ mới nhất giúp xây dựng trang web và ứng dụng một cách linh hoạt và nhanh chóng hơn. Bạn có thể sử dụng các hàm kiểm soát kích thước và đổi kích thước phần tử, duy trì khoảng cách giữa để tạo kiểu chữ linh hoạt và linh hoạt.

Các hàm toán học, calc(), min(), max() và clamp() cho phép dùng các biểu thức toán học có phép cộng (+), trừ (-), nhân (*) và chia (/) làm giá trị thành phần
Giá trị CSS và Đơn vị cấp 4

Hỗ trợ trình duyệt

`min()`

Hỗ trợ trình duyệt

Nguồn

`max()`

Hỗ trợ trình duyệt

Nguồn

`clamp()`

Hỗ trợ trình duyệt

Nguồn

Cách sử dụng

Bạn có thể sử dụng min(), max() và clamp() ở phía bên phải của bất kỳ CSS nào ở đâu thì có ý nghĩa. Đối với min() và max(), bạn cung cấp một danh sách giá trị đối số và trình duyệt sẽ xác định giá trị nào là nhỏ nhất hoặc lớn nhất. Ví dụ: trong trường hợp của width: min(1rem, 50%, 10vw), trình duyệt sẽ tính toán đơn vị tương đối nào trong số này là nhỏ nhất và sử dụng giá trị đó cho chiều rộng của phần tử.

Hàm min() chọn giá trị nhỏ nhất từ danh sách các tùy chọn trong Bản minh hoạ Codepen.

Hàm max() làm tương tự cho giá trị tối đa.

Hàm max() chọn một giá trị từ danh sách các lựa chọn trong Bản minh hoạ Codepen.

Để sử dụng clamp(), hãy nhập ba giá trị: một giá trị tối thiểu, một giá trị lý tưởng để tính từ gốc và giá trị lớn nhất.

Hàm clamp() giữ giá trị giữa giá trị tối thiểu được chỉ định và tối đa trong bản minh hoạ Codepen này.

Bạn có thể sử dụng các hàm này ở bất kỳ đâu: <length>, <frequency> Cho phép <angle>, <time>, <percentage>, <number> hoặc <integer>. Bạn có thể tự sử dụng chúng (như trong font-size: max(0.5vw, 50%, 2rem)), với calc() (như trong font-size: max(calc(0.5vw - 1em), 2rem)) hoặc đã bao hàm (như trong font-size: max(min(0.5vw, 1em), 2rem)).

Sau đây là một số ví dụ về cách sử dụng các hàm này.

Chiều rộng hoàn hảo

Theo Các yếu tố của kiểu chữ Phong cách của Robert Bringhurst, "bất cứ thứ gì từ 45 đến 75 ký tự đều được coi là độ dài dòng thoả đáng cho một trang một cột được đặt ở mặt văn bản có chân ở cỡ chữ".

Để đảm bảo các khối văn bản dài từ 45 đến 75 ký tự, hãy sử dụng clamp() và ch (ký tự tạm dừng có độ rộng 0) đơn vị:

p {
  width: clamp(45ch, 50%, 75ch);
}

Thao tác này cho phép trình duyệt xác định chiều rộng của đoạn. Thuộc tính này đặt chiều rộng thành 50% theo mặc định. Nếu 50% nhỏ hơn 45ch, thì biến này sẽ sử dụng 45ch làm chiều rộng thay vào đó, nếu 50% lớn hơn 75ch, thì 50% sẽ sử dụng 75ch.

Dùng hàm clamp() để đặt chiều rộng tối thiểu và tối đa. Xem bản minh hoạ về Codepen.

Bạn cũng có thể chia nhỏ tài sản này chỉ bằng min() hoặc max(). Nếu bạn muốn phải luôn có chiều rộng là 50% và không vượt quá 75ch chiều rộng đối với kích thước lớn hơn màn hình, hãy sử dụng width: min(75ch, 50%); để đặt kích thước tối đa.

Dùng hàm min() để đặt chiều rộng tối đa.

Tương tự như vậy, bạn có thể đặt kích thước tối thiểu cho văn bản dễ đọc bằng cách dùng max() như trong width: max(45ch, 50%);. Ở đây, trình duyệt chọn bất kỳ giá trị lớn hơn, tức là phần tử phải từ 45ch trở lên.

Dùng hàm max() để đặt chiều rộng tối thiểu.

Quản lý khoảng đệm

Bạn cũng có thể sử dụng max() để đặt kích thước khoảng đệm tối thiểu. Ví dụ này lấy từ Thủ thuật CSS, nơi độc giả Caluã de Lacerda Pataca chia sẻ ý tưởng này: Để một phần tử có khoảng đệm bổ sung ở kích thước màn hình lớn hơn, nhưng giữ khoảng đệm tối thiểu ở kích thước nhỏ hơn kích thước màn hình. Để thực hiện việc này, hãy sử dụng calc() hoặc max() và trừ giá trị tối thiểu khoảng đệm từ cả hai bên của phần tử: calc((100vw - var(--contentWidth)) / 2), hoặc max(2rem, 50vw - var(--contentWidth) / 2). Trong biểu định kiểu, sẽ có dạng như sau:

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

Đặt khoảng đệm tối thiểu cho một thành phần bằng hàm max(). Xem bản minh hoạ về Codepen.

Kiểu chữ linh hoạt

Để bật kiểu chữ linh hoạt, Mike Riethmeuller đã phổ biến một kỹ thuật sử dụng hàm clamp() để đặt kích thước phông chữ tối thiểu, kích thước phông chữ tối đa, và cho phép điều chỉnh tỷ lệ giữa các kích thước đó.

Dùng clamp() để tạo kiểu chữ linh hoạt. Xem bản minh hoạ về Codepen.

Trước khi clamp(), thiết kế tỷ lệ phông chữ, bạn phải có các chuỗi kiểu phức tạp. Bây giờ, bạn có thể để trình duyệt thực hiện công việc cho bạn. Đặt phông chữ tối thiểu chấp nhận được kích thước (ví dụ: 1.5rem cho tiêu đề), kích thước tối đa (chẳng hạn như 3rem) và kích thước lý tưởng (chẳng hạn như 5vw). Giờ đây, bạn đã có kiểu chữ điều chỉnh theo tỷ lệ cho đến khi chiều rộng khung nhìn đạt đến giá trị tối thiểu và tối đa giới hạn, hãy sử dụng rất ít mã:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Tài nguyên khác

Ảnh bìa của @yer_a_wizard trên Không chờ.