Máy tạo CSS clamp
Nhập chiều rộng màn hình và kích thước cho màn hình nhỏ và lớn để tạo CSS thay đổi mượt mà kích thước chữ hoặc khoảng cách. Xem trước kết quả px hoặc rem, rồi sao chép mã CSS và Tailwind hoặc lưu chúng dưới dạng văn bản.
Bạn có thể làm gì
Chỉ định 2 cặp chiều rộng và kích thước
Chỉ định kích thước cho một viewport nhỏ và một viewport lớn. Hỗ trợ 6 loại: cỡ phông, khoảng cách, khoảng đệm, lề, chiều rộng và chiều cao.
Tạo mã dạng px hoặc rem
Nhập mọi giá trị bằng px, và chọn px hoặc rem cho đầu ra. Nhận một khai báo CSS và mã thuộc tính tùy ý của Tailwind.
Kiểm tra CSS đã tạo ngay lập tức
Áp dụng CSS cho hai phần tử trong bản xem trước. Kiểm tra cách văn bản và khoảng cách hiển thị ở chiều rộng khung hiện tại.
Cách sử dụng
Chọn thuộc tính cần thay đổi
Chọn thuộc tính CSS bạn muốn chỉ định, chẳng hạn font-size cho cỡ chữ hoặc gap cho khoảng cách giữa các phần tử.
Nhập hai chiều rộng viewport và kích thước
Nhập từng chiều rộng viewport kèm kích thước của nó bằng px. Kích thước cho viewport nhỏ không được lớn hơn kích thước cho viewport lớn.
Kiểm tra đơn vị đầu ra và tạo
Chọn px hoặc rem trong cài đặt nâng cao. Với rem, hãy kiểm tra cỡ phông gốc trước khi nhấn Tạo CSS.
Xem trước và lấy mã
Sao chép CSS và dán vào nơi bạn sẽ sử dụng. Mở mã Tailwind để lấy. Bạn cũng có thể sao chép cả 2 mục cùng lúc hoặc lưu thành văn bản.
Hữu ích khi
Đổi cỡ tiêu đề một cách mượt mà
Khi bạn muốn đặt cỡ chữ cho viewport hẹp và rộng rồi thay đổi liên tục giữa hai chiều rộng đó, thay vì theo từng bậc.
Điều chỉnh khoảng cách theo viewport
Khi bạn muốn khoảng cách giữa các thẻ hoặc khoảng đệm bên trong thay đổi trong phạm vi kích thước nhỏ nhất và lớn nhất đã đặt.
Chỉ định kích thước fluid và đọc bản xem trước
3 giá trị trong clamp
clamp là một hàm CSS chỉ định giá trị nhỏ nhất, một giá trị fluid và giá trị lớn nhất. Công thức được tạo nối hai điểm tham chiếu bằng một biểu thức tuyến tính và giới hạn kích thước ngoài phạm vi về các kích thước ở hai đầu.
Nhập bằng px; xuất bằng px hoặc rem
Cả chiều rộng viewport và kích thước đều nhập bằng px. Với đầu ra rem, kích thước và hạng tử cố định được chia cho cỡ phông gốc, còn hệ số vw cho chiều rộng viewport được giữ nguyên.
Khớp cơ sở rem với nơi mã được dùng
Mặc định, mã coi 1rem là 16px. Nếu cỡ phông của phần tử gốc khác ở nơi mã được dùng thì kích thước ở hai đầu và cách kích thước thay đổi cũng sẽ khác. Hãy kiểm tra ở nơi bạn sử dụng.
Khung xem trước xác định chiều rộng viewport
Khung xem trước là một khung hiển thị độc lập. Nó tính vw từ chiều rộng bên trong khung chứ không phải chiều rộng của toàn màn hình. Tùy thuộc vào thuộc tính, cùng một CSS đã tạo được áp dụng cho văn bản, khoảng cách giữa hai phần tử, khoảng cách hoặc kích thước phần tử.
Cũng nên kiểm tra nơi mã được dùng
Văn bản và cấu trúc xem trước là cố định. Ngoài ra hãy kiểm tra phông chữ, văn bản dài, ngắt dòng và tăng cỡ chữ của trình duyệt ở nơi bạn dùng mã. Mã Tailwind dùng định dạng thuộc tính tùy ý; cũng hãy kiểm tra rằng nó được nhận diện và tạo ở nơi bạn sử dụng.
Câu hỏi thường gặp
Điều gì xảy ra ngoài phạm vi chiều rộng viewport đã chỉ định?
Chiều rộng hẹp hơn chiều rộng nhỏ đã chỉ định sẽ dùng kích thước nhỏ nhất, còn chiều rộng rộng hơn chiều rộng lớn đã chỉ định sẽ dùng kích thước lớn nhất. Với rem, bạn phải dùng cùng cỡ phông gốc như khi mã được tạo.
Cỡ phông gốc cho rem là gì?
Nó chỉ định bao nhiêu px được dùng để tính 1rem. Mặc định là 16px, và bạn có thể đổi thành 1–1000px trong cài đặt nâng cao. Hãy khớp với cỡ phông của phần tử gốc nơi bạn sẽ dùng mã.
Tôi có thể chỉ định kích thước bằng nhau hoặc giá trị âm không?
Đặt giá trị nhỏ nhất và lớn nhất bằng nhau để có kích thước cố định. Chỉ margin cho phép giá trị âm. Không hỗ trợ kích thước nhỏ đi khi viewport rộng hơn.
Thay đổi thuộc tính hoặc giá trị có được áp dụng ngay không?
Thay đổi chúng sẽ xóa mã và bản xem trước đã tạo. Nhấn Tạo CSS để cập nhật. Điều này cũng áp dụng khi bạn đổi đơn vị đầu ra hoặc cỡ phông gốc.
Tôi có thể đổi văn bản xem trước không?
Văn bản mẫu và Aa 123 đều cố định. Không có tính năng sửa văn bản. Ngoài ra hãy kiểm tra văn bản và chiều rộng hiển thị thực tế trên trang dùng CSS đã tạo.
Đầu vào và kết quả
- Chiều rộng viewport
- 1–100000px. Chiều rộng viewport nhỏ phải nhỏ hơn chiều rộng lớn. Cũng chấp nhận số thập phân.
- Kích thước
- 0–10000px. Chỉ margin có thể xuống tới −10000px. Kích thước cho viewport nhỏ không được lớn hơn kích thước cho viewport lớn.
- Kết quả
- Một khai báo CSS và một thuộc tính tùy ý của Tailwind. Lưu cả 2 mục thành css-clamp-generator.txt.
- Độ chính xác
- Công thức được tạo dùng hệ số có tối đa 13 chữ số có nghĩa. Sẽ xảy ra lỗi với các chiều rộng gần nhau đến mức công thức đã làm tròn không thể tái tạo các điểm tham chiếu, ví dụ.