Đơn vị dp (pixel độc lập với mật độ) với CSS là gì?

Đối với Android, mọi người khuyên bạn nên sử dụng các phép đo dp (pixel độc lập với mật độ) cho các phần tử giao diện người dùng và có các quy ước tồn tại như sử dụng 48dpcho chiều cao của nút, v.v.

Tôi đang làm việc trên một ứng dụng web và tôi nhận được rất nhiều lời chỉ trích về thiết kế giao diện người dùng nói rằng nó không phù hợp với các tiêu chuẩn thiết kế Android. Rõ ràng, ứng dụng của tôi sẽ trông khác vì nó đang sử dụng CSS và HTML thay vì chủ đề Android Holo, nhưng tôi vẫn muốn làm cho nó phù hợp nhất có thể. Tuy nhiên CSS không cho phép các phép đo độc lập về mật độ.

Khi tôi kiểm tra ứng dụng của mình trên các độ phân giải và mật độ pixel khác nhau, nó trông không đẹp và đôi khi, nó không đúng tỷ lệ nên thậm chí không hoạt động được. CSS không có các đơn vị dp như Android native development, nhưng tôi đã tự hỏi một số lựa chọn thay thế là gì.

Bằng cách nào đó, tôi có thể lấy mật độ pixel bằng cách sử dụng Javascript và chia tỷ lệ mọi thứ theo cách thủ công không? Cách tốt nhất để tạo một ứng dụng web có giao diện và hoạt động tốt trên tất cả các độ phân giải / mật độ là gì?

http://www.w3.org/TR/css3-values/#lengths

Đơn vị gần nhất có sẵn trong CSS là đơn vị phần trăm khung nhìn.

• vw - Bằng 1% chiều rộng của khối chứa ban đầu.
• vh - Bằng 1% chiều cao của khối chứa ban đầu.
• vmin - Bằng nhỏ hơn của vw hoặc vh.
• vmax - Bằng lớn hơn của vw hoặc vh.

Trình duyệt di động duy nhất cần biết không hỗ trợ các đơn vị này là Opera. http://caniuse.com/#feat=viewport-units

Tôi không đồng ý với câu trả lời hiện đang được chấp nhận. Như uber5001 gợi ý, a pxlà một đơn vị cố định và theo tinh thần tương tự như những nỗ lực của Android-specifc dp.

Per Material's spec :

Khi viết CSS, hãy sử dụng px ở bất cứ nơi nào có ghi dp hoặc sp. Dp chỉ cần được sử dụng để phát triển cho Android.

Ngoài ra

Khi thiết kế cho web, hãy thay thế dp bằng px (cho pixel).

Sử dụng rem.

Đây là kích thước phông chữ của phần tử gốc và một đơn vị cơ sở rất tốt cho kích thước của các phần tử giao diện người dùng khác.

Nếu một người sử dụng cùng một kích thước tuyệt đối (tính bằng cm), văn bản và các yếu tố khác sẽ quá lớn trên thiết bị di động hoặc quá nhỏ trên máy tính để bàn.

Nếu một người sử dụng cùng một lượng pixel, văn bản và các yếu tố khác sẽ quá nhỏ trên thiết bị di động hoặc quá lớn trên máy tính để bàn.

Các remđơn vị là tại chỗ vì nó nói "Này, đây là lớn như thế nào bằng cách thông thường nên được." Dựa trên kích thước của các phần tử giao diện người dùng khác trên đây là một lựa chọn khá hợp lý.

Trong CSS3, có thể chính xác hơn khi nói rằng web không có Android px. Thông số cho CSS3'spx cho biết điều này:

điểm ảnh; 1px bằng 1/96 của 1in

px có thể là phép đo bạn muốn, trong tương lai.

Kể từ CSS3, không có đơn vị CSS nào thực sự độc lập với thiết bị. Xem thông số kỹ thuật W3C về độ dài tuyệt đối . Đặc biệt, các đơn vị tuyệt đối có thể không khớp với các phép đo vật lý của chúng.

Nếu các đơn vị vật lý đúng với mục đích của chúng, bạn có thể sử dụng một số thứ như điểm; điểm đủ gần với dps:

1 in = 72 pt
1 in = 160 dp

1 dp = 72 / 160 pt

Nếu bạn sử dụng SCSS, bạn có thể viết một hàm để trả về trong pts:

@function dp($_dp) {
  @return (72 / 160) * $_dp + pt;
}

Và sử dụng nó:

.shadow-2 {
  height: dp(2);
}

Điều gì về một giao diện dựa trên các đơn vị rem?

Tôi không đủ kinh nghiệm về vấn đề này để xác nhận, nhưng tôi nghĩ bạn có thể thực hiện một số phép toán dựa trên kích thước khung nhìn để áp dụng kích thước phông chữ trong phần tử gốc và toàn bộ giao diện sẽ điều chỉnh cho phù hợp. Công cụ này là một chút phù thủy đối với tôi.

Tại sao không sử dụng điểm, nó là một kích thước nhất quán trên các thiết bị. Và có liên quan đến kích thước màn hình. Hầu hết không quen thuộc với nó vì nó xuất phát từ xuất bản truyền thống.

Còn về việc sử dụng một số kết hợp giữa vw (chiều rộng màn hình cho bất kỳ thiết bị nào) và em? Ở đây, kích thước phông chữ sẽ tự động thay đổi, tùy thuộc vào chiều rộng màn hình thiết bị của bạn. Sử dụng trong tệp CSS chính của bạn quy tắc tiếp theo:

font-size: calc(100vw * 10 / 375);

(chiều rộng cho iPhone 6/7/8 là 375px, thay đổi thành 320px (iPhone5) và v.v.)

Trong mọi trường hợp, nó hoạt động hoàn hảo. Chỉ có một điểm trừ. Nếu mục tiêu của bạn là "pixel hoàn hảo", thì bạn cần sử dụng các số lớn sau dấu chấm.

Ví dụ: mục tiêu của bạn là cỡ chữ h5: 18px trên tất cả các màn hình.

Khi đó "em" hoàn hảo của bạn sẽ là:

h5 { 
 font-size: 1.79904em;
 }

không có sự hoàn hảo sử dụng 18/10:

h5 { 
 font-size: 1.8em;
 }

Theo Google Chrome, bạn nhận được 18,0096px;