Toolzy

Trình tạo CSS Clamp

Tạo giá trị CSS clamp() linh hoạt từ kích thước min/max và chiều rộng viewport.

Kết quả

Nhập kích thước tối thiểu và tối đa cùng khoảng viewport áp dụng, và nhận một biểu thức CSS clamp() sẵn sàng dùng cho typography hoặc khoảng cách linh hoạt, đáp ứng.

Cách sử dụng

  1. Nhập kích thước tối thiểu và tối đa theo pixel.
  2. Nhập chiều rộng viewport tối thiểu và tối đa mà kích thước áp dụng giữa chúng.
  3. Sao chép khai báo clamp() đã tạo, tùy chọn đổi tên thuộc tính CSS.

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

Giá trị linh hoạt được tính như thế nào?
Nó tính độ dốc tuyến tính giữa kích thước min và max qua khoảng viewport, biểu diễn dưới dạng công thức rem + vw bên trong clamp().
Tại sao kết quả dùng rem và vw?
rem giữ kích thước cơ sở tương đối với cài đặt phông chữ của người dùng, còn vw giúp nó co giãn mượt mà theo chiều rộng viewport.
Nếu viewport tối đa của tôi nhỏ hơn viewport tối thiểu thì sao?
Công cụ hiển thị thông báo xác thực yêu cầu bạn làm cho chiều rộng viewport tối đa lớn hơn tối thiểu.

Công cụ liên quan