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.
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,
Giá trị CSS và Đơn vị cấp 4calc()
,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
Hỗ trợ trình duyệt
min()
max()
clamp()
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 max()
làm tương tự cho giá trị tối đa.
Để 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.
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
.
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.
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.
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);
}
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 đó.
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
- Giá trị CSS và đơn vị trên MDN
- Giá trị CSS và quy cách đơn vị cấp 4
- Bài viết về thủ thuật CSS về chiều rộng của phần tử bên trong
- min(), max(), clamp() Tổng quan của Ahmad Shadeed
Ảnh bìa của @yer_a_wizard trên Không chờ.