Công cụ: Tính Kích Thước Viewport Responsive. Danh mục: Web & Internet. Nhóm: HTML & CSS. Nền tảng: BOP.INK. Xử lý trực tiếp trên trình duyệt, không lưu dữ liệu, miễn phí 100%.
Web & InternetHTML & CSSFrontend Dev🔒 Bảo Mật & Riêng Tư • Miễn Phí Không Giới Hạn
Tính Kích Thước Viewport Responsive
Hỗ trợ lập trình viên Frontend tính toán tỷ lệ khung hình màn hình, chuyển đổi giữa Breakpoints Tailwind (sm, md, lg, xl, 2xl) và sinh mã hàm CSS clamp() cho Fluid Typography.
Đang khởi tạo tiện ích trực tiếp trên trình duyệt...
Cách Tính Viewport & CSS Clamp
Các bước thao tác đơn giản và chuẩn xác nhất
1
Nhập Chiều Rộng & Chiều Cao Viewport
Điền độ phân giải màn hình tính bằng Pixel (ví dụ 1920 x 1080).
2
Nhập Cỡ Chữ Min & Max
Điền cỡ chữ nhỏ nhất trên Mobile (16px) và lớn nhất trên Desktop (24px).
3
Sao Chép Cú Pháp CSS clamp()
Nhận đoạn mã CSS clamp() sẵn sàng dán vào mã nguồn CSS.
Công Thức CSS Fluid Typography
Minh bạch công thức và phương pháp tính toán chuẩn
clamp(MIN, VAL, MAX): VAL = MinSize + (MaxSize - MinSize) * ((100vw - MinWidth) / (MaxWidth - MinWidth)).
| Breakpoints Tailwind | Chiều Rộng Tối Thiểu | Thiết Bị Tương Ứng |
|---|---|---|
| sm | 640px | Điện thoại ngang, tablet nhỏ |
| md | 768px | iPad, Máy tính bảng đứng |
| lg | 1024px | Laptop nhỏ, iPad Pro |
| xl / 2xl | 1280px / 1536px | Màn hình Desktop PC chuẩn |
Câu Hỏi Thường Gặp (FAQs)
Giải đáp các thắc mắc phổ biến về tiện ích này
clamp() giữ cho giá trị luôn nằm trong khoảng giữa Min và Max, và tự động co giãn mượt mà theo độ rộng màn hình (vw).