Chuyển đổi đơn vị CSS
Công cụ chuyển đổi đơn vị CSS miễn phí trực tuyến, px/rem/em/vw
Các loại đơn vị CSS
px (pixel) — đơn vị tuyệt đối, 1px = 1/96 inch. rem — tương đối với cỡ chữ gốc (mặc định 16px). em — tương đối với cỡ chữ cha. vw — 1% chiều rộng viewport. vh — 1% chiều cao viewport. pt — point (1pt = 1.333px). cm, mm, in — đơn vị vật lý.
Cách chuyển đổi đơn vị CSS
Nhập giá trị với đơn vị của nó, đặt cỡ chữ gốc (cho tính toán rem) và kích thước viewport (cho vw/vh). Công cụ hiển thị chuyển đổi sang tất cả đơn vị khác. Điều này giúp đảm bảo thiết kế responsive hoạt động trên các kích thước màn hình khác nhau.
▶Tôi nên sử dụng px hay rem?
Sử dụng rem cho cỡ chữ và khoảng cách để hỗ trợ cài đặt tiếp cận của người dùng (thu phóng trình duyệt). Sử dụng px cho viền, box shadow và chi tiết cần kiểm soát chính xác. Nhiều nhóm áp dụng cách tiếp cận rem-first để tiếp cận tốt hơn.
▶Cỡ chữ gốc mặc định là bao nhiêu?
Cỡ chữ gốc mặc định trong hầu hết trình duyệt là 16px. Vì vậy 1rem = 16px, 1.5rem = 24px. Bạn có thể thay đổi điều này với html { font-size: ... } trong CSS.
▶Khi nào nên sử dụng vw và vh?
Sử dụng vw/vh cho bố cục responsive chia tỷ lệ theo viewport. Hero section lấp đầy toàn bộ màn hình (100vh), cỡ chữ chia tỷ lệ theo chiều rộng viewport và phần tử full-width là các trường hợp sử dụng phổ biến.