Chuyển đổi màu
Đổi HEX, RGB và HSL cùng độ trong suốt, xem mẫu màu và sao chép giá trị CSS.
Tạo cỡ chữ linh hoạt với CSS clamp()
Tính font-size: clamp() từ giới hạn cỡ chữ và chiều rộng vùng nhìn, hỗ trợ px, rem và xem trước kích thước.
rem được tính theo cỡ chữ gốc đã nhập. Trên trang hoàn chỉnh, hãy kiểm tra cả mức thu phóng trình duyệt và chế độ chữ lớn.
Cỡ chữ vừa vặn giúp mỗi dòng văn bản trở nên dễ đọc hơn.
CSS
Giới thiệu công cụ
Đặt cỡ tiêu đề cho điện thoại, máy tính rồi xem các giá trị ở giữa.
Cách sử dụng
Nhập cỡ chữ nhỏ nhất, lớn nhất và hai chiều rộng vùng nhìn tương ứng. Chọn px hoặc rem, thay đổi chiều rộng mô phỏng để xem kết quả rồi sao chép hoặc tải CSS. Hai chiều rộng phải tăng dần; cỡ chữ nhỏ nhất không được vượt cỡ lớn nhất.
Cỡ chữ thay đổi tuyến tính giữa hai mốc chiều rộng và giữ trong giới hạn ở ngoài khoảng đó. Với rem, hãy đặt cỡ chữ gốc khớp với trang đích. Công thức dựa trên vùng nhìn của trình duyệt, không dựa trên phần tử chứa và không sửa các thiết lập chữ khác.
Câu hỏi thường gặp
Vì sao rem cần kích thước chữ gốc?
Bản xem trước dùng cỡ chữ của phần tử gốc để đổi rem sang pixel, nên cần khớp với trang thực tế. Công thức thay đổi theo độ rộng vùng hiển thị của trình duyệt; cỡ chữ gốc khác sẽ làm thay đổi kết quả.
Đặt thế nào để được 16px trên điện thoại và 32px trên máy tính?
Chọn px, nhập cỡ 16px ở khung nhìn rộng 400px và 32px ở 1200px. Kết quả là clamp(16px, 8px + 2vw, 32px): tại 800px sẽ là 24px; ngoài khoảng đó sẽ giữ mức nhỏ nhất hoặc lớn nhất. Giá trị phụ thuộc chiều rộng viewport, không phải chiều rộng vùng chứa.
Công cụ liên quan
Mở trong thẻ mới
Bình luận
0