Thước đo pixel miễn phí
Đo khoảng cách bằng pixel trên màn hình của bạn.
Cách sử dụng
- Nhấp-kéo trên thước để đo một khoảng cách. Thước hiển thị các bước tăng theo pixel.
- Các điểm bắt đầu và kết thúc có thể di chuyển, kéo chúng để điều chỉnh phép đo.
- Bật chế độ dọc để đo khoảng cách dọc thay vì ngang.
- Xem số pixel và kích thước vật lý ước tính của bạn bên dưới thước.
Câu hỏi thường gặp
Phép tính kích thước vật lý chính xác đến mức nào?
Kích thước vật lý dựa trên tỷ lệ pixel của thiết bị và DPI giả định 96. DPI thực của màn hình thay đổi, vì vậy đây là một xấp xỉ. Để đo chính xác trên tài liệu in, hãy sử dụng thước vật lý.
Tôi có thể đo khoảng cách dọc không?
Có. Bật chế độ dọc để đo khoảng cách dọc theo pixel thay vì ngang.
Tỷ lệ pixel của thiết bị có nghĩa là gì?
Màn hình mật độ cao (như màn hình Retina) có tỷ lệ pixel lớn hơn 1, nghĩa là nhiều pixel vật lý đại diện cho một pixel CSS. Công cụ này đo bằng pixel CSS.
Thước đo này đo gì (và không thể đo gì)
Đây là thước đo tự do nằm trong tab trình duyệt của bạn. Kéo qua canvas phía trên để đọc số pixel CSS. Nó hoạt động với bất cứ thứ gì được vẽ bên trong viewport trình duyệt (ảnh chụp màn hình mở trong tab, bản xuất Figma xem trực tiếp, trang web trực tiếp trong tab thứ hai) nhưng không thể đo cửa sổ desktop, giao diện ứng dụng gốc, thanh taskbar, hay bất cứ thứ gì được vẽ bởi compositor cấp hệ điều hành bên ngoài trình duyệt. Nó cũng không thể tự động phát hiện ranh giới phần tử như Chrome DevTools hay Page Ruler Redux. Đó là loại công cụ khác. Đặt vấn đề trung thực là quan trọng: thước này là câu trả lời đúng khi bạn muốn đo nhanh, không cần cài đặt, bên trong trình duyệt.
Pixel CSS không phải là điểm ảnh phần cứng
Pixel mà JavaScript và CSS sử dụng là pixel tham chiếu được W3C định nghĩa: «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 sải tay.» Với sải tay danh nghĩa khoảng 28 inch, góc nhìn đó xấp xỉ 0,0213°, hay khoảng 0,26 mm trên bề mặt màn hình. Pixel CSS là đơn vị góc nhìn, không phải điểm ảnh phần cứng, được thiết kế độc lập với thiết bị để font 16 px xuất hiện với kích thước vật lý gần như nhau trên điện thoại, laptop và TV.
Tất cả các đơn vị CSS tuyệt đối khác đều neo vào nó: 1in = 2.54cm = 96px, 1mm ≈ 3.78px, 1pt ≈ 1.333px. Bảng chuyển đổi cố định đó chính xác là lý do khiến chỉ số «mm ở 96 DPI» là ước tính chứ không phải phép đo thực, xem bên dưới.
Ba thuật ngữ pixel mà nhà thiết kế hay nhầm lẫn
| Thuật ngữ | Đơn vị đếm | Nơi xuất hiện |
|---|---|---|
| Điểm ảnh CSS | Pixel tham chiếu W3C; đơn vị JS và CSS dùng cho bố cục | window.innerWidth, getBoundingClientRect(), mọi độ dài CSS |
| Điểm ảnh thiết bị | Điểm ảnh thực tế có thể định địa chỉ trên màn hình | screen.width × devicePixelRatio, độ phân giải gốc của màn hình |
| Điểm ảnh hình ảnh | Độ phân giải nội tại của file ảnh raster | naturalWidth / naturalHeight trên phần tử <img> |
Mối quan hệ trong một câu: độ phân giải vật lý màn hình ≈ kích thước viewport CSS × tỉ lệ pixel thiết bị, và ảnh sắc nét cần độ rộng nội tại ≥ độ rộng CSS kết xuất × DPR. Logo CSS có kích thước 100 px trên điện thoại với DPR 3 cần ảnh nguồn rộng ít nhất 300 pixel để trông sắc nét.
Tỉ lệ pixel thiết bị
Chỉ số DPR trong bảng thông tin hiển thị window.devicePixelRatio: «tỉ lệ giữa độ phân giải tính bằng pixel vật lý và độ phân giải tính bằng pixel CSS cho thiết bị hiển thị hiện tại.» Các giá trị phổ biến:
- 1,0: màn hình 96 DPI truyền thống (màn hình cũ, máy Windows ở tỉ lệ 100%).
- 2,0: hầu hết MacBook Retina, nhiều màn hình 4K ở tỉ lệ 200%.
- 2,5-3,5: điện thoại hiện đại. Các model iPhone Pro báo 3,0; flagship Android thường ở mức 2,625 / 2,75 / 3,5.
Hai hành vi đáng lưu ý: thu phóng trang (Ctrl/Cmd + và −) có thay đổi DPR, nên chỉ số sẽ nhảy khi bạn thu phóng. Pinch-zoom phóng to viewport đã kết xuất mà không thay đổi kích thước pixel CSS nền, nên không ảnh hưởng. Apple ra mắt màn hình Retina trên iPhone 4 năm 2010, và để giữ ứng dụng và trang web không bị thu nhỏ còn một phần tư kích thước ban đầu khi pixel thiết bị nhân đôi ở cả hai chiều, iOS giới thiệu «points» (tương đương pixel CSS). Web thừa hưởng mô hình tương tự: pixel CSS 2× ánh xạ tới bốn pixel thiết bị.
Tiêu chuẩn kích thước vùng chạm
Một trong những tác dụng hữu ích nhất của thước pixel là xác minh rằng nút, liên kết và biểu tượng đáp ứng tiêu chuẩn tối thiểu về kích thước vùng chạm cho khả năng tiếp cận. Ba tiêu chuẩn thường xuất hiện cùng nhau:
| Nguồn | Tối thiểu | Đơn vị | ~Vật lý (96 DPI) |
|---|---|---|---|
| WCAG 2.2 SC 2.5.8 AA | 24 × 24 | CSS px | ~6.4 × 6.4 mm |
| WCAG 2.5.5 AAA | 44 × 44 | CSS px | ~11.6 × 11.6 mm |
| Apple HIG | 44 × 44 | pt | ~11.6 × 11.6 mm |
| Material Design / Android | 48 × 48 | dp | ~9 mm (tham chiếu 160 dpi) |
WCAG 2.2 đã thêm tiêu chí AA 24 × 24 vào tháng 10 năm 2023. Bài kiểm tra tuân thủ của W3C diễn đạt như sau: «Phải có thể về mặt khái niệm vẽ một hình vuông pixel CSS 24 x 24 đặc… hoàn toàn nằm trong vùng đích.» Có năm ngoại lệ (khoảng cách, tương đương, nội tuyến, kiểm soát user-agent, thiết yếu), nhưng nhìn chung giao diện người dùng cơ bản cần đáp ứng ngưỡng đó. Tiêu chí AAA cũ hơn (2.5.5) yêu cầu 44 × 44, tương đương Apple HIG và xấp xỉ Material 48 dp.
Lưới thiết kế 8 pixel
Hầu hết thiết kế giao diện hiện đại dựa trên đơn vị cơ sở 8 pixel (gọi là «lưới 8 điểm» hay «lưới 8 dp» tùy nền tảng). Material Design 2 và 3 đều xây dựng trên nó, với điều chỉnh nhỏ hơn 4 dp cho biểu tượng và thành phần mật độ cao. Chọn 8 không phải ngẫu nhiên: nó chia đều vào các độ rộng màn hình phổ biến (320, 360, 375, 1.280, 1.440), tỉ lệ theo số nguyên (8, 16, 24, 32, 40, 48), và kết hợp tự nhiên với cỡ chữ thân mặc định 16 px. Lưới con 4 pixel xử lý căn chỉnh tinh.
Ứng dụng thực tế: khi bạn đo một khoảng trống là 14 px hay 17 px, bạn nhiều khả năng đã phát hiện lỗi đơn vị CSS. Giá trị dự định gần như chắc chắn là 16. Thước pixel là cách nhanh nhất để phát hiện khoảng cách lệch lưới.
Khi nào bạn dùng thước trình duyệt
- QA thiết kế trên trang đã triển khai. So sánh kết quả thực tế với bản thiết kế. Khoảng cách giữa hai thẻ là 16 px hay 24 px?
- Xác minh vùng chạm. Thả thước lên nút để xác nhận đáp ứng ngưỡng AA 24 px hay mục tiêu AAA 44 px.
- Kiểm tra khoảng cách trên mockup dán. Mở bản xuất Figma trong tab, thả thước lên, kiểm tra nhịp điệu.
- Kiểm tra breakpoint responsive. Chỉ số Chiều rộng Viewport đóng vai trò chỉ báo breakpoint trực tiếp khi bạn thay đổi kích thước cửa sổ.
- Giáo dục. Cho một developer mới thấy
devicePixelRatiobáo gì trên máy của họ, và nó thay đổi thế nào khi họ nhấn Cmd/Ctrl + để thu phóng. - Kiểm tra khả năng tiếp cận. Xác minh vùng nhấn nút biểu tượng, độ dài dòng tính bằng pixel CSS và kích thước chữ tối thiểu.
DevTools trình duyệt và các thước khác
Mọi trình duyệt hiện đại đều có công cụ đo lường, nhưng ẩn sau các bảng điều khiển developer.
- Chrome DevTools: mở Command Menu (Cmd/Ctrl+Shift+P), gõ «rulers», chọn Show rulers on hover. Thước xuất hiện dọc cạnh trên và trái của viewport khi bạn di chuột qua phần tử. Gắn với việc chọn phần tử thay vì kéo tự do.
- Firefox DevTools: Settings → Available Toolbox Buttons → bật Toggle rulers for the page. Nút bật/tắt thước xuất hiện trong thanh công cụ DevTools; thước phủ lên cạnh trang với kích thước viewport ở góc trên phải.
- Figma / Sketch / Adobe XD: tất cả đều có lớp phủ thước bên trong canvas của chúng. Figma dùng Shift+R để bật/tắt. Các thước này gắn với file: chúng đo bên trong mô hình tài liệu riêng, không phải trang web đã triển khai.
- Tiện ích mở rộng trình duyệt: Page Ruler Redux, MeasureIt, PixelZoomer, Dimensions. Tất cả đều cần cài đặt và cấp quyền; tất cả đều giới hạn trong trình duyệt. Hữu ích nếu bạn cần tự động phát hiện phần tử.
Thước tab trình duyệt như thế này là câu trả lời cho nhà thiết kế, kiểm tra QA và người làm nội dung muốn một cú nhấp duy nhất thay vì mở bảng DevTools hay cài tiện ích mở rộng.
Câu hỏi thêm
Chỉ số milimét chính xác đến mức nào?
Đây là ước tính. Phép chuyển đổi dùng quan hệ W3C cố định 1 in = 96 CSS px, chính xác chỉ khi màn hình của bạn thực sự là 96 DPI, thu phóng trình duyệt là 100% và tỉ lệ hệ điều hành là 100%. Màn hình thực tế biến động rộng: màn hình 1080p 24 inch chạy khoảng 92 ppi, 1440p 27 inch khoảng 109 ppi, 4K 27 inch khoảng 163 ppi. Coi số mm là ước tính bậc độ lớn, không bao giờ là phép đo cấp in ấn. Để có kích thước vật lý thực, hãy đặt thước vật lý lên màn hình.
Tại sao tỉ lệ pixel thiết bị thay đổi khi tôi thu phóng?
Thu phóng trang (Cmd/Ctrl + hoặc −) thực sự thay đổi kích thước pixel CSS so với pixel thiết bị, nên tỉ lệ giữa chúng thay đổi. Pinch-zoom trên thiết bị cảm ứng hoạt động khác. Nó phóng to viewport đã kết xuất mà không thay đổi kích thước pixel CSS nền, nên không làm DPR thay đổi.
Tại sao 1366 × 768 không chính xác là 16:9?
Vì thực ra không phải vậy. 1366 ÷ 768 = 1.7786; tỉ lệ 16:9 thực là 1.7778. Tỉ lệ rút gọn thực ra là 683:384. Nhiều màn hình laptop giá rẻ dùng độ phân giải lệch chuẩn nhẹ này, đó là một lý do video 1080p đôi khi downscale không hoàn hảo trên chúng.
Tôi có thể đo bên ngoài trình duyệt không?
Không. Trang web chỉ có thể nhìn và vẽ bên trong tab trình duyệt của nó. Để đo cửa sổ desktop, giao diện ứng dụng gốc hay bất cứ thứ gì bên ngoài trình duyệt, bạn cần tiện ích cấp hệ điều hành: «Show Inspector» của macOS Preview, Snipping Tool của Windows với lớp phủ kích thước, hay thước màn hình bên thứ ba.
Có dữ liệu nào được gửi lên máy chủ không?
Không. Thước được kết xuất bằng API canvas HTML5; kích thước viewport và DPR đến từ JavaScript cục bộ; chỉ số đo được tính toán trong trình duyệt của bạn. Trang hoạt động ngoại tuyến sau khi đã tải.