Thiết kế / Đáp ứng
Trình tạo CSS Clamp() cho kiểu chữ và khoảng cách linh hoạt
Nhập kích thước nhỏ nhất, lớn nhất cùng độ rộng khung nhìn áp dụng cho từng kích thước để nhận biểu thức clamp() theo rem. Kích thước sẽ tăng mượt giữa hai mức này, kèm bảng kích thước ở các độ rộng màn hình phổ biến.
Trình tạo CSS Clamp() cho kiểu chữ và khoảng cách linh hoạt: Công cụ vẽ một đường thẳng đi qua hai điểm: từ 16 px ở khung nhìn rộng 320 px đến 24 px ở khung nhìn rộng 1280 px, kích thước tăng 0,8333 px với mỗi 100 px độ rộng. Đường thẳng được viết dưới dạng một phần rem cố định cộng với một phần vw, 0.8333rem + 0.8333vw; clamp() giữ kích thước trong khoảng từ 1rem đến 1.5rem khi nằm ngoài phạm vi đó. Chạy 100% cục bộ trong trình duyệt của bạn, không có tệp nào được tải lên máy chủ.
- Danh mục
- Công cụ lập trình viên
- Lượt chạy
- Trong trình duyệt của bạn
- Chi phí
- Miễn phí · không cần đăng ký
- Trạng thái khả dụng
- Sẵn sàng sử dụng
Chạy hoàn toàn trong trình duyệt của bạn
CSS
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
| Chiều rộng khung nhìn | Kích thước |
|---|---|
| 320 px | 16 px |
| 375 px | 16,46 px |
| 768 px | 19,73 px |
| 800 px | 20 px |
| 1024 px | 21,87 px |
| 1280 px | 24 px |
| 1440 px | 24 px |
| 1920 px | 24 px |
Giá trị ở giữa của clamp() là một đường thẳng đi qua hai điểm bạn cung cấp: giá trị này cộng một lượng rem cố định với một phần chiều rộng khung nhìn, nhờ đó kích thước thay đổi mượt mà giữa hai chiều rộng và dừng ở các giới hạn bên ngoài chúng. Dùng rem cho phần cố định giúp kích thước thích ứng với cài đặt cỡ phông chữ riêng của người đọc. Cách này áp dụng cho mọi độ dài: cỡ phông chữ, vùng đệm, khoảng cách hoặc lề.
Ví dụ có tính toán
Với một tiêu đề có kích thước 32 px trên điện thoại 375 px và 48 px trên máy tính để bàn 1440 px, độ dốc là 16 ÷ 1065 = 1,5023 px trên mỗi 100 px, còn biểu thức là clamp(2rem, 1.6479rem + 1.5023vw, 3rem). Trên máy tính bảng 800 px, tiêu đề có kích thước 38,38 px.
Khả năng tiếp cận
WCAG yêu cầu văn bản có thể được phóng to đến 200%. Vì một phần kích thước linh hoạt phụ thuộc vào khung nhìn, độ dốc quá lớn có thể khiến việc phóng to không làm văn bản lớn hơn nhiều; hãy giữ kích thước lớn nhất không quá khoảng 2,5 lần kích thước nhỏ nhất, và dùng trình tạo thang chữ để chọn các bước nhất quán.
Cách sử dụng
- Nhập kích thước nhỏ nhất và lớn nhất theo px.
- Nhập độ rộng khung nhìn áp dụng cho từng kích thước.
- Sao chép giá trị clamp() và kiểm tra các kích thước trong bảng.
Quyền riêng tư và giới hạn
Được tính toán trong trình duyệt của bạn.
Công cụ liên quan
Câu hỏi thường gặp
Tại sao không chỉ dùng vw?
Chỉ dùng vw sẽ bỏ qua cài đặt cỡ chữ của người đọc, đồng thời có thể khiến chữ quá nhỏ trên điện thoại hoặc quá lớn trên màn hình rộng. Phần rem và các giới hạn trong clamp() khắc phục cả hai vấn đề này.
clamp() có hoạt động trên mọi trình duyệt không?
Có: mọi trình duyệt hiện tại đều đã hỗ trợ clamp() từ năm 2020.
Kích thước có thể nhỏ hơn trên màn hình rộng hơn không?
Có: hãy nhập kích thước lớn hơn cho độ rộng nhỏ nhất, khi đó biểu thức sẽ trừ phần vw thay vì cộng phần này.
Công cụ miễn phí · trong trình duyệt của bạn lượt chạy · không cần tài khoản