Điểm ảnh vật lý so với pixel CSS so với thiết bị pixel độc lập so với mật độ pixel độc lập so với PPI

Question

Tôi đang học về phát triển web và tôi đang gặp khó khăn trong việc xác định điểm tương đương trong tất cả điều này.

Tôi biết pixel phần cứng và pixel vật lý là đơn vị nhỏ nhất và mật độ pixel độc lập ánh xạ tới pixel phần cứng thực tế thông qua tỷ lệ pixel của thiết bị và chúng được sử dụng để làm cho trải nghiệm xem nhất quán hơn. Điều này có nghĩa là các điểm ảnh độc lập của thiết bị tôi nhìn thấy là giống nhau không?

Hơn nữa, tôi đọc rằng trình duyệt báo cáo chiều rộng chế độ xem trong CSS pixel, đây có phải là những cái này và các giá trị DIP không?

Tôi biết rằng Pixels trên inch là chữ, chúng là số pixel trong một inch, nhưng chúng liên quan đến DIP như thế nào? Một phép đo hoàn toàn riêng biệt? Khi nào tôi nên sử dụng thay vào đó?

Tôi hy vọng đây là một câu hỏi phù hợp, tôi đang gặp vấn đề về tinh thần liên kết tất cả các khái niệm này vào một bản đồ có thể sử dụng và không tìm thấy bất kỳ câu hỏi nào khác mà chúng được giải quyết cùng một lúc.

Answer 1

Tôi biết pixel phần cứng và pixel vật lý là đơn vị nhỏ nhất và mật độ pixel độc lập ánh xạ tới pixel phần cứng thực tế thông qua tỷ lệ pixel của thiết bị và chúng được sử dụng để làm cho trải nghiệm xem nhất quán hơn. Điều này có nghĩa là các điểm ảnh độc lập của thiết bị tôi nhìn thấy là giống nhau không?

Hơn nữa, tôi đọc rằng trình duyệt báo cáo chiều rộng chế độ xem trong CSS pixel, đây có phải là những cái này và các giá trị DIP không?

Có trên cả hai số. Ví dụ: một phần tử có height: 200px; width: 200px là luôn là 200 bằng 200 trong DIP hoặc pixel CSS, ngay cả khi phần cứng được định cấu hình để hiển thị ở độ phân giải cao hơn hoặc thấp hơn bình thường. Với hệ số tỷ lệ 200%, nếu pixel 1x hoặc pixel 1x1 ánh xạ tới pixel vật lý 1x1 trong 100%, pixel đó sẽ ánh xạ tới hình vuông pixel vật lý 2x2.

Tôi biết rằng Pixels trên inch là chữ, chúng là số pixel trong một inch, nhưng chúng liên quan đến DIP như thế nào? Một phép đo hoàn toàn riêng biệt?

CSS không sử dụng PPI; nó chỉ sử dụng DPI. Section 6.4 of css-values-3 liệt kê các đơn vị sau đây:

dpi
Dots per inch.

dpcm
Chấm trên mỗi cm.

dppx
Dấu chấm trên mỗi đơn vị px.

Độ phân giải <> đơn vị thể hiện kích thước của một dấu chấm đơn trong biểu diễn đồ họa bằng cách cho biết có bao nhiêu dấu chấm trong CSS, cm hoặc px.

Vì mục đích của CSS và Media Queries, một dấu chấm đơn luôn luôn tương ứng với một pixel vật lý, không bao giờ là điểm ảnh DIP hoặc CSS, do đó là đơn vị dppx.Ví dụ: hệ số tỷ lệ 200% hoặc tỷ lệ pixel của thiết bị (không chuẩn) là 2.0 tương đương với 2 dppx.