Bộ chuyển đổi đơn vị CSS (px / rem / em / vh / vw)

Vì sao dùng rem thay vì px

Trình duyệt bắt đầu ở 16px, nhưng người có thị lực kém thường tăng cỡ phông chữ mặc định trong cài đặt trình duyệt. Văn bản dùng rem sẽ tăng theo cài đặt đó; văn bản dùng px thì không. Thu phóng trang phóng to cả hai, nhưng cài đặt cỡ phông chữ là thứ nhiều người đọc dựa vào, và tiêu chí thay đổi kích thước văn bản của WCAG yêu cầu văn bản có thể phóng to đến 200% mà không bị mất nội dung. Hãy đặt kích thước kiểu chữ và khoảng cách xung quanh bằng rem, còn px dành cho các đường rất mảnh và đường viền.

Cột em và việc lồng nhau

Một em phụ thuộc vào cỡ phông chữ của chính phần tử đó; riêng với font-size, cỡ này là cỡ của phần tử cha. Các giá trị em ở đây giả định phần tử cha có cỡ gốc, điều này chỉ đúng ở cấp cao nhất. Bên trong phần tử 0.875em, 0.875em một lần nữa cho ra 12.25px thay vì 14px, và việc thu nhỏ sẽ cộng dồn. Vì vậy rem là mặc định an toàn hơn, còn em phù hợp với khoảng cách cần co giãn theo văn bản của thành phần.

Cơ sở 62,5% và đơn vị khung nhìn

Đặt html { font-size: 62.5% } sẽ khiến 1rem bằng 10px, thuận tiện hơn khi tính toán; hãy nhập 10 làm cỡ cơ sở để khớp. Cách này làm mọi thứ khác được định cỡ bằng rem, bao gồm cả thành phần bên thứ ba, nhỏ đi, nên hãy đặt lại cỡ dễ đọc cho body.

Các giá trị vw và vh giả định khung nhìn 1440 × 900. Trên điện thoại, 100vh có thể cao hơn vùng hiển thị khi thanh công cụ của trình duyệt đang hiện; 100svh và 100dvh là các đơn vị tính đến điều này.

Cách sử dụng

1. Nhập giá trị pixel (px) và kích thước cơ sở gốc, mặc định là 16px.
2. Xem các giá trị rem, em, vw và vh được tính toán.
3. Sao chép các đoạn mã CSS sẵn dùng hoặc tham khảo bảng tỷ lệ.

Quyền riêng tư và giới hạn

Chạy ngay trong JavaScript phía máy khách.