Bộ tính clamp() cho khoảng cách & padding bố cục thích ứng

Xây dựng hệ thống khoảng trắng thích ứng có thể co giãn mượt mà giữa điện thoại di động màn hình hẹp và màn hình máy tính để bàn siêu rộng.

Kích thước tối thiểu Kích thước tối đa Đơn vị Viewport tối thiểu px Viewport tối đa px

Hướng dẫn từng bước

1
Nhập giới hạn khoảng cách
Nhập padding tối thiểu cho di động và padding tối đa cho máy tính để bàn theo pixel.
2
Xác định ngưỡng màn hình
Thiết lập ngưỡng chiều rộng màn hình bắt đầu và kết thúc cho việc mở rộng khoảng cách.
3
Áp dụng vào quy tắc khoảng cách
Sao chép giá trị đã tính toán và dán vào các thuộc tính `padding`, `margin` hoặc `gap` của bạn.

Kiến trúc style gọn gàng

Thay thế các khối truy vấn `@media` lặp đi lặp lại trong design token của bạn bằng một quy tắc clamp() khai báo duy nhất.

Giới hạn an toàn xác định

Giúp khoảng đệm (padding) của section không bao giờ co lại dưới tiêu chuẩn khả dụng tối thiểu hay phình to vượt quá giới hạn bố cục.

Hướng dẫn theo từng trường hợp

Công cụ tính CSS clamp() →

Bộ tạo công thức CSS clamp() cho Fluid TypographyTạo công thức CSS clamp(rem, vw) chuẩn xác về mặt toán học để co giãn mượt mà…

Câu hỏi thường gặp

Có thể dùng clamp() cho thuộc tính gap trong CSS grid hoặc flexbox không?

Có, clamp() hoạt động hoàn hảo tương tự cho các thuộc tính gap, margin, padding và width.

Điều gì xảy ra trên màn hình lớn hơn viewport tối đa?

Thuộc tính sẽ cố định chắc chắn ở giá trị tối đa đã đặt và không tăng thêm nữa.