Bộ chuyển đổi đơn vị CSS

Chuyển đổi giữa px, rem, em, vw, vh, pt, cm, mm, in và % với ngữ cảnh có thể cấu hình.

Cài đặt ngữ cảnh

Chuyển đổi

Kết quả

Tham khảo các đơn vị CSS

Đơn vị tuyệt đối

Đơn vị tương đối

Khi nào sử dụng rem hoặc em?

Sử dụng rem cho kích thước nhất quán (margin, padding, cỡ phông chữ) · nó luôn tham chiếu đến gốc. Sử dụng em khi bạn muốn kích thước liên quan đến cha, như các component lồng nhau thích nghi với ngữ cảnh của chúng.

Tại sao px không phải lúc nào cũng bằng một pixel vật lý?

px CSS là một «pixel tham chiếu» được xác định là 1/96 inch ở khoảng cách cánh tay. Trên các màn hình mật độ cao (HiDPI), một px CSS có thể tương ứng với 2 hoặc 3 pixel vật lý.

Pixel tham chiếu CSS, nền tảng của mọi đơn vị tuyệt đối

Các đơn vị tuyệt đối CSS (in, cm, mm, Q, pt, pc, px) được neo vào pixel tham chiếu CSS. W3C CSS Values and Units Module Level 3 định nghĩa nó là «góc nhìn của một pixel trên thiết bị có mật độ pixel 96 dpi và khoảng cách từ người đọc bằng một tầm tay.» Với tầm tay khoảng 28 inch, góc nhìn đó xấp xỉ 0,0213°, tương đương khoảng 0,26 mm chiều rộng màn hình vật lý ở khoảng cách xem thông thường, và thông số minh họa rằng cùng góc nhìn đó tương đương khoảng 1,3 mm ở 12 feet, đó là lý do tại sao pixel máy chiếu và TV có thể lớn hơn về mặt vật lý nhưng vẫn được tính là một CSS pixel.

Đối với màn hình, thông số kỹ thuật định nghĩa CSS 1in = 96 px thay vì lấy từ inch màn hình thực tế. Điều này có nghĩa là các phép chuyển đổi trong bảng trên là chính xác và không phụ thuộc vào DPI màn hình: 12 pt luôn là 16 px, 1 pc luôn là 16 px, 1 mm luôn khoảng 3,78 px. Trên màn hình DPI cao (Retina, 4K), hệ điều hành ánh xạ mỗi CSS pixel sang bất kỳ device pixel nào tốt nhất xấp xỉ góc nhìn, thường là 2 device pixel mỗi CSS pixel trên MacBook Retina, 3 trên iPhone Pro, 1,5 trên máy tính Windows để bàn ở tỷ lệ 150%. Đường viền 1px sắc nét trên màn hình Retina cần 2 device pixel.

Các đơn vị font-relative

Các đơn vị này giải quyết dựa trên kiểu chữ chứ không phải inch vật lý. Chúng là nền tảng của các layout có thể truy cập và mở rộng được.

em là nền tảng, với chiều sâu lịch sử đáng ngạc nhiên, nó ra đời trước CSS khoảng 500 năm. Trong in ấn hoạt chữ (sau Gutenberg, k. 1450), «em quad» là một khối kim loại vuông có chiều rộng bằng chiều cao thân chữ, lịch sử xấp xỉ chiều rộng của chữ M hoa. CSS mượn cách trừu tượng hóa này: 1em bằng font-size đã tính toán của phần tử hiện tại. Điểm bẫy nổi tiếng là các khai báo font-size: 1.2em lồng nhau được nhân lên, một con 1.2em bên trong cha 1.2em hiển thị ở mức 1,44× so với ông nội.

rem («root em») được thêm vào CSS3 để giải quyết chính xác vấn đề nhân đó. 1rem bằng font-size của phần tử <html> gốc, không bị ảnh hưởng bởi lồng nhau cha. Trình duyệt mặc định root là 16 px trừ khi người dùng ghi đè, vì vậy 1rem = 16px trong điều kiện mặc định. rem được cung cấp trong Safari 4.1 và Firefox 3.6 năm 2010, IE9 vào tháng 3 năm 2011, IE8 không bao giờ hỗ trợ nó, điều này buộc phải dùng px fallback cho đến khoảng năm 2014.

Các đơn vị font-relative mới hơn (CSS Values 4) bao gồm ch (chiều rộng của ký tự «0» trong font hiện tại, hữu ích cho chiều rộng tối đa độ dài dòng như max-width: 60ch hoặc 66ch, nằm trong phạm vi đọc lý tưởng 45-75 ký tự), ex (x-height của font), cap (chiều cao chữ hoa), ic (khoảng cách chuyển tiếp của ký tự CJK 水), và lh / rlh (line-height đã tính toán của phần tử / root, hữu ích cho nhịp điệu dọc).

Các đơn vị viewport-percentage (và vấn đề thanh địa chỉ trên di động)

Bốn đơn vị cổ điển, vw, vh, vmin, vmax: đại diện cho 1% chiều rộng viewport, 1% chiều cao viewport, 1% của cái nhỏ hơn trong hai, và 1% của cái lớn hơn. Tại 1920 × 1080: 1vw = 19.2px, 1vh = 10.8px.

100vh là nỗi đau lâu dài trên di động vì cả iOS Safari và Chrome Mobile đều hiển thị thanh URL co lại khi bạn cuộn. Trình duyệt phải chọn: làm 100vh bằng viewport nhỏ (thanh URL hiển thị, nội dung bị cắt sau khi cuộn) hoặc viewport lớn (thanh URL ẩn, khoảng trắng lớn trên lần vẽ đầu tiên). iOS Safari đã chọn hành vi lớn, để các developer phải debug «tại sao phần hero của tôi cao hơn màn hình?» trong nhiều năm.

Nỗ lực Interop 2022 (Apple, Google, Igalia, Microsoft, Mozilla và những người khác) đã thêm các biến thể viewport mới vào tháng 3 năm 2022 để khắc phục vấn đề này:

Công thức thực tế: min-height: 100svh trên phần hero để tránh cắt xén trên iOS, hoặc height: 100dvh trên modal toàn màn hình. Safari cung cấp hỗ trợ trước (15.4, tháng 3 năm 2022); Firefox 101 (tháng 5 năm 2022); Chrome và Edge 108 (tháng 12 năm 2022). Hỗ trợ toàn cầu hiện đã rộng rãi.

Các đơn vị container query

Họ đơn vị mới hơn, cqw, cqh, cqi, cqb, cqmin, cqmax: cho phép một phần tử tự định kích thước dựa trên container của nó thay vì viewport. Thiết yếu cho thiết kế theo component nơi cùng một component có thể xuất hiện ở chiều rộng 300 px trong sidebar và 900 px trong cột chính. Đơn vị này đánh giá so với container tổ tiên gần nhất có container-type được đặt; nếu không có container đủ điều kiện, thông số kỹ thuật lùi về đơn vị viewport nhỏ trên trục đó. Container query (và đơn vị) được cung cấp trong Chromium 105 năm 2022, Safari 16 vào tháng 9 năm 2022, và Firefox 110 vào tháng 2 năm 2023, trở thành Baseline mới khả dụng năm 2023.

Phần trăm, và tại sao chúng không thực sự là đơn vị độ dài

Phần trăm không phải là đơn vị độ dài theo nghĩa thực, chúng là kiểu giá trị riêng biệt được giải quyết theo ngữ cảnh:

Do cách giải quyết theo ngữ cảnh này, % không thể đơn giản được chuyển đổi sang px mà không biết kích thước cha; bộ chuyển đổi ở trên yêu cầu nó một cách rõ ràng.

Hướng dẫn thực hành) khi nào dùng gì

Typography linh hoạt với clamp()

clamp(MIN, PREFERRED, MAX) trả về giá trị ưu tiên bị giới hạn bởi giá trị sàn và trần. Mẫu fluid-type kinh điển kết hợp sàn và trần rem với phần giữa điều chỉnh theo vw:

h1 { font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3rem); }

Số hạng giữa mở rộng tuyến tính theo viewport, trong khi sàn và trần dựa trên rem ngăn kích thước cực đoan và bảo toàn tỷ lệ font người dùng. clamp() đạt Baseline widely-available vào tháng 7 năm 2020 (Chrome 79, Firefox 75, Safari 13.1). Các công cụ như Utopia (utopia.fyi) và fluid-type-scale.com nhận chiều rộng viewport tối thiểu / tối đa, kích thước font tối thiểu / tối đa, và tỷ lệ modular scale (1,2; 1,25; 1,333; 1,5; vàng) và tạo ra các khai báo sẵn để dán.

Khả năng truy cập, WCAG SC 1.4.4 Resize Text

Tiêu chuẩn yêu cầu văn bản có thể phóng to đến 200% kích thước gốc mà không mất nội dung hay chức năng. Nó không bắt buộc một đơn vị cụ thể, nhưng các kỹ thuật đủ điều kiện được liệt kê bao gồm «sử dụng các phép đo tương đối với các phép đo khác trong nội dung», các đơn vị tương đối (em, rem, %) làm cho việc tuân thủ dễ dàng hơn; các layout chỉ dùng pixel có thể đạt yêu cầu qua zoom trình duyệt nhưng dễ vỡ hơn. Bài kiểm tra trong đầu: điều này có nên mở rộng khi người dùng phóng to kích thước văn bản mặc định của họ không? Nếu có, dùng rem. Đường viền, padding trang trí và trang trí thuần túy có thể giữ px.

Thêm câu hỏi

Tại sao 1in không thực sự là một inch trên màn hình của tôi?

Vì thông số CSS neo các đơn vị tuyệt đối vào tham chiếu góc nhìn thay vì inch vật lý. CSS 1in được định nghĩa là chính xác 96 CSS pixel, mà trình duyệt ánh xạ sang bất kỳ device pixel nào tốt nhất xấp xỉ tham chiếu ở khoảng cách xem thông thường. Trên hầu hết màn hình điều đó gần với một inch thực sự, nhưng trên TV xem từ bên kia phòng nó sẽ lớn hơn về mặt vật lý, và trên laptop DPI cao trên đùi bạn nó có thể nhỏ hơn một chút. Để đo vật lý thực sự, hãy dùng thước kẻ áp vào màn hình.

Cái «mẹo 62,5%» mà mọi người đôi khi đề cập là gì?

Một mẫu được dùng rộng rãi: html { font-size: 62.5%; }. Vì 62,5% × 16 = 10, điều này làm cho 1rem = 10px: thuận tiện cho tính nhẩm (1.6rem = 16px, 2.4rem = 24px). Có tranh luận về nó; phía phản đối lập luận rằng nó ghi đè kích thước font mặc định ưu tiên của người dùng và hơi không thân thiện với người dùng về khả năng truy cập. Nhiều nhóm hiện đại chọn tỷ lệ với ghi đè người dùng được bảo toàn rõ ràng (ví dụ: đặt font-size của body bằng rem để cascade tôn trọng mặc định của người dùng).

Khi nào nên dùng vw so với cqw?

Dùng vw khi kích thước phải theo viewport (văn bản hero full-bleed, modal toàn màn hình). Dùng cqw khi kích thước phải theo container của component: ví dụ tiêu đề card lớn hơn khi card ở cột chính và nhỏ hơn khi ở sidebar, bất kể kích thước viewport. Các đơn vị container query được cung cấp năm 2022-2023 và là câu trả lời đúng gần như bất cứ lúc nào bạn muốn dùng tỷ lệ font điều khiển bởi media query cho một component đơn lẻ.

Sự khác biệt giữa dpi và dppx trong @media query là gì?

Cả hai đều diễn đạt độ phân giải. dppx có nghĩa là «chấm mỗi CSS pixel», 1dppx = 96dpi, vì CSS định nghĩa 96 px mỗi inch. @media (min-resolution: 2dppx) nhắm mục tiêu các màn hình loại Retina nơi mỗi CSS pixel được render với ít nhất 2 device pixel. Dùng dppx thường được ưu tiên hơn vì nó tránh được sự nhầm lẫn dpi-so-với-CSS-inch.

Có gì được gửi lên máy chủ không?

Không. Các phép chuyển đổi là số học JavaScript đơn giản chạy cục bộ trong trình duyệt của bạn. Không có gì về đầu vào của bạn được gửi đi bất kỳ đâu; trang hoạt động ngoại tuyến sau khi đã tải.

Công cụ liên quan

Công cụ Chuyển Đổi PX Sang REM Miễn Phí Trình tạo CSS Border Radius Công cụ Chuyển Đổi Đơn Vị Trực Tuyến Miễn Phí