Làm cách nào để chuyển đổi giữa Android DP và CSS px?

Tôi thấy đây có lẽ là một câu hỏi không, nhưng nó thực sự làm tôi bối rối.

Tôi đang đọc tài liệu từ Thiết kế Vật liệu của Google, cùng với một số triển khai của nó trong css. Thông số kỹ thuật được viết bằng Android dp, trong khi mã css sử dụng pxlàm đơn vị độ dài.

Điều khiến tôi bối rối là việc triển khai css thường sử dụng giá trị chính xác từ đặc tả, ví dụ, một bánh mì nướng nên có :

Chiều cao thanh ăn nhẹ một dòng: cao 48 dp

Chiều rộng tối thiểu: 288 dp

Góc tròn 2 dp

CSS tương ứng :

min-height: 48px;
min-width: 288px;
...
border-radius: 2px;

Theo hiểu biết hiện tại của tôi, Android DPthường được hiển thị ở kích thước một pixel trên màn hình 160dpi, trong khi CSS pxđược xác định là góc nhìn. Vì vậy, một điều pxxảy ra giống như dpkhi nhìn thấy ở một khoảng cách nào đó? Nếu vậy, đó có phải là một mẫu phổ biến để sử dụng pxnhư dptrong css hay tôi đã hiểu sai hoàn toàn mã CSS?

Tôi không biết gì về phát triển Android trước đây và không phải là nhà thiết kế. Cảm ơn vì bất kì sự giúp đỡ.

Tôi nghĩ rằng chấp nhận là sai. Css px thực sự là Pixel độc lập thiết bị (nhúng) và đây là mô hình phổ biến để sử dụng px làm dp trong css.

Tôi tin rằng câu trả lời đầy đủ cho câu hỏi của bạn có thể được tìm thấy ở đây:

/programming/2025282/difference-b between-pixel-dp-dip-and-sp-in-android

Để chuyển đổi dp sang px, bạn cần tính đến kích thước hiển thị mà bạn đang xử lý. DPI càng lớn, càng nhiều pixel bạn sẽ phải nhồi nhét trong cùng một khu vực để làm cho nó trông đẹp hơn và để tránh pixel hóa :

ldpi: 1 dp = 0,75 px
mdpi: 1 dp = 1 px
hdpi: 1 dp = 1,5 px
xhdpi: 1 dp = 2 px
xxhdpi: 1 dp = 3 px
xxxhdpi: 1 dp = 4 px

Ví dụ:

Một hình vuông 3x3 dp trong CSS hoặc Photoshop cần phải là:

2,25x2,25 px - ldpi
3x3 px - mdpi (Samsung ACE, Xperia X8)
6x6 px - xhdpi (Xperia S, Google Nexus 4)
9x9 px - xxhdpi (Samsung S4 - S5, HTC One)
12x12 px - xxxhdpi sẽ được sử dụng trên các thiết bị thế hệ tiếp theo)

Dựa trên những điều trên, các tính toán của bạn sẽ trông như thế này, sử dụng hệ số nhân 3x dp cho màn hình XXHDPI:

min-height: 144px;
min-width: 864px;
...
border-radius: 6px;

Android tự động thu nhỏ hình ảnh nếu nhận thấy độ phân giải của thiết bị đã sử dụng thấp hơn, do đó bạn an toàn để phát triển với XXHDPI, vì nó giải quyết phần lớn các thiết bị cao cấp hiện nay trên thị trường.

Đây là một công cụ chuyển đổi đơn giản để thực hiện công việc cho bạn: http://androidpixels.net/

W3C nói :

Do đó, đơn vị px bảo vệ bạn khỏi phải biết độ phân giải của thiết bị. Cho dù đầu ra là 96 dpi, 100 dpi, 220 dpi hay 1800 dpi, độ dài được biểu thị bằng toàn bộ số px luôn trông đẹp và rất giống nhau trên tất cả các thiết bị (...)

Và nó nói rằng:

Để có được ý tưởng về sự xuất hiện của px, hãy tưởng tượng màn hình máy tính CRT từ những năm 1990: chấm nhỏ nhất nó có thể hiển thị các biện pháp khoảng 1/100 inch (0,25mm) hoặc hơn một chút. Đơn vị px có tên từ các pixel màn hình đó.

Nó cũng nói:

Trên thực tế, CSS yêu cầu 1px phải chính xác bằng 1/96 inch trong tất cả đầu ra được in (...)

Có tính đến việc các thiết bị màn hình mặc định được cấu hình là 96dpi, đây là giả định tốt nhất về cách trình duyệt diễn giải pixel CSS:

96 css-px = ~ 1 inch

Và chúng ta biết rằng trong Android:

160 dp = ~ 1 inch

Vì thế:

96 css-px = ~ 160 dp
css-px-length = round(dp-length * 96 / 160)

Và theo đó:

min-height: 29px;
min-width: 173px;
...
border-radius: 2px; /* 2dp is 1.2px from the formula but it wont work */

Chà, tôi nghĩ điều đó đúng cho đến khi tôi kiểm tra kích thước Toast của Google Polymer :

  min-height: 48px;
  min-width: 288px;
  padding: 16px 24px 12px;
  box-sizing: border-box;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 2px;
  bottom: 12px;
  left: 12px;
  font-size: 14px;

Vì vậy, đây là chuyển đổi 1 đổi 1 và từ đó chúng tôi nhận được rằng các trình duyệt Android sử dụng:

1 css-px = 1 dp

Và 96 css-px mỗi inch được sử dụng trên các thiết bị khác như máy tính để bàn và máy tính xách tay.

Để kết luận: pixel css độc lập với thiết bị dpi và trên thiết bị Android 1 css-px bằng 1dp.

Không có ai trả lời đúng, thực tế có hai:

1. Được đề xuất bởi Google (ví dụ: trong khóa học Udacity về Thiết kế Vật liệu): Sử dụng một chuyển đổi đơn giản, trong nhiều trường hợp là 1: 1 giống như trong thư viện Polyme. Ví dụ, không phù hợp với màn hình võng mạc , thay vì 1: 1, hãy sử dụng tỷ lệ mật độ được cung cấp trong bảng thiết bị trong Hướng dẫn thiết kế vật liệu chính thức ( bảng có tỷ lệ và số liệu cụ thể cho một số thiết bị phổ biến ) và cung cấp các truy vấn @media phù hợp cho ngưỡng độ phân giải và tài sản, giả sử rằng 1dp bằng 1px cho màn hình mdpi (160dpi / ppi) .

Lưu ý: ý tưởng tổng thể: ở cuối trang: Chia tỷ lệ hình ảnh với một số hình ảnh để trực quan hóa các tỷ lệ cho nhiều ngưỡng độ phân giải màn hình (Ảnh Breakpoint)

2. nếu bạn muốn có sự thống nhất cực cao trong thiết kế của mình cho các thiết bị cụ thể , bạn phải thực hiện một số nghiên cứu và tính toán thêm, và điều quan trọng hơn là một đống các truy vấn @media khác để hỗ trợ nhiều thiết bị như bạn muốn và cung cấp dự phòng (với phương pháp được đề cập ở vị trí số 1) cho những người bạn không quan tâm lắm.

Dưới đây là thông tin chi tiết hơn cho những người muốn đi sâu vào chủ đề hơn, nhưng đó là một lời giải thích và logic đằng sau, trên đây là một câu trả lời hoàn chỉnh :

Vấn đề là "mật độ pixel", theo hướng dẫn chính thức của Thiết kế Vật liệu (Bố cục> Đơn vị và số đo), là:

số lượng pixel phù hợp với một inch.

Vì vậy, về cơ bản mật độ pixel là một tên mới cho giá trị ppi hoặc vì nhiều người không nhận ra đây là một thứ riêng biệt, một giá trị dpi.

Định nghĩa 1dp theo cùng một hướng dẫn:

Một dp bằng một pixel vật lý trên màn hình với mật độ 160 . Để tính dp:

dp = (chiều rộng tính bằng pixel * 160) / mật độ màn hình

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

Nguyên tắc cốt lõi của Thiết kế vật liệu là duy trì kích thước vật lý nhất quán trên các nền tảng khác nhau, điều này làm tăng vấn đề về độ phân giải của máy tính để bàn, ppi (/ dpi) và pixel css trong trường hợp bạn nên sử dụng tính toán dp giống như trong trường hợp của Android và không đúng vì hầu hết các màn hình đều là 96ppi (đó là một giả định quan trọng đối với CSS), một phần lớn trong số chúng có ppi cao hơn một chút và nếu bạn tính đến không chỉ máy tính để bàn truyền thống mà cả máy tính xách tay thông thường hoặc máy tính bảng hoặc "chuyển đổi" như Surface, cần phải chuyển đổi: chúng thường nằm trong khoảng từ 100-130ppi, có nghĩa là cái tôi đang sử dụng tại thời điểm này là 127ppi:

100% = 160ppi -> chiều rộng 1 pixel vật lý = 1dp -> hình chữ nhật 100x100px = 100x100dp

79% = 127ppi -> chiều rộng 1 pixel vật lý = ca. 0,8dp -> hình chữ nhật 100x100px = 80x80dp

Mặc dù dp là một đơn vị thuần túy và mới chỉ dành cho Android, bạn nên thực hiện một số tính toán để điều chỉnh bố cục MD mà tất cả đều có trong dp. Nếu bạn muốn biết thêm về yếu tố cụ thể sẽ lớn đến mức nào trong ý nghĩa vật lý, hữu ích nhất cho mục đích của câu hỏi là giá trị phạm vi kích thước cảm ứng lý tưởng trong hướng dẫn Thiết kế Vật liệu cho các thiết bị cụ thể ** Bên dưới giá trị dp có một thể chất. ** Giá trị dp thay đổi, nhưng vật lý vẫn giữ nguyên.

Vấn đề, tại sao bạn cần tính toán các đơn vị, được giải thích thêm trong hướng dẫn API của Android (Chuyển đổi đơn vị dp thành đơn vị pixel) và nó vẫn áp dụng cho các thành phần được tạo kiểu bằng CSS:

Trong một số trường hợp, bạn sẽ cần thể hiện kích thước trong dp và sau đó chuyển đổi chúng> thành pixel.

Hãy tưởng tượng một ứng dụng trong đó cử chỉ cuộn hoặc lật được nhận ra sau khi ngón tay của người dùng di chuyển ít nhất 16 pixel. Trên màn hình cơ sở, người dùng phải di chuyển 16 pixel / 160 dpi, bằng 1/10 inch (hoặc 2,5 mm) trước khi nhận ra cử chỉ. Trên thiết bị có màn hình mật độ cao (240dpi), người dùng phải di chuyển 16 pixel / 240 dpi, tương đương 1/15 inch (hoặc 1,7 mm). Khoảng cách ngắn hơn nhiều và do đó ứng dụng có vẻ nhạy hơn với người dùng.

Chuyển đổi Polyme 1: 1 đã đề cập trước đó có lẽ là do mật độ 96dpi, hoặc thậm chí là mật độ tôi đã đưa ra ở đâu đó trong mật độ thấp hoặc thậm chí (như trong trường hợp của 96dpi), ngay cả dưới nó. Nếu tính rằng giá trị dp không phải là một css được chấp nhận, sẽ dễ dàng hơn khi giả định rằng tỷ lệ mật độ (0,75- cho mức trung bình thấp, 1,0, v.v.) là giá trị nên được sử dụng để đơn giản hóa và nhiều kích thước hỗ trợ màn hình, được hiển thị trong bảng thiết bị cho Thiết kế Vật liệu đã đề cập trước đó. Nó thậm chí còn được đề cập như một trong những thực tiễn tốt nhất trong trích dẫn chương trên của hướng dẫn API Android. Và đó là nơi chuyển đổi Polyme 1: 1 có thể tốt, vì rất nhiều thiết bị có tỷ lệ mật độ ở cấp 1.

Quay trở lại tình huống khó xử cuối cùng: css px, nếu bạn quyết định đi sâu vào các sắc thái tinh tế của các thiết bị khác nhau. Nếu bạn không phải là một người tìm hiểu, chỉ cần gắn bó với tỷ lệ Mật độ từ bảng MD. Nhưng nếu bạn là người cầu toàn, mấu chốt của các pixel CSS và mối quan hệ kích thước vật lý có một giải thích hoàn hảo (và khá đơn giản) trong phần Giới thiệu Ứng viên của W3C:

Các đơn vị chiều dài tuyệt đối được cố định trong mối quan hệ với nhau và được neo vào một số phép đo vật lý. Chúng chủ yếu hữu ích khi môi trường đầu ra được biết đến. Các đơn vị tuyệt đối bao gồm các đơn vị vật lý ('in', 'cm', 'mm', 'pt', 'pc', 'q') và đơn vị góc thị giác ('px') :

Để đọc ở độ dài của cánh tay, 1px do đó tương ứng với khoảng 0,26 mm (1/96 inch).

Lưu ý: Lưu ý rằng định nghĩa về đơn vị pixel và đơn vị vật lý này khác với các phiên bản CSS trước đó. Đặc biệt, trong các phiên bản CSS trước, đơn vị pixel và đơn vị vật lý không liên quan theo tỷ lệ cố định: các đơn vị vật lý luôn được gắn với các phép đo vật lý của chúng trong khi đơn vị pixel sẽ thay đổi phù hợp nhất với pixel tham chiếu. (Thay đổi này được thực hiện vì có quá nhiều nội dung hiện có phụ thuộc vào giả định 96dpi và phá vỡ giả định đó phá vỡ nội dung.)

Định nghĩa mới này về px (có tính đến kích thước vật lý) sẽ lấp đầy khoảng cách giữa các pixel CSS và dps và cho phép chúng tôi đảm bảo rằng bằng cách sử dụng các phép tính đơn giản , môi trường đầu ra, trong trường hợp này là nhất quán (theo nghĩa vật lý ) Bố cục MD , giữ nguyên trên các thiết bị và nền tảng khác nhau. Ngoài ra, cả Nguyên tắc W3C và MD đều sử dụng hình ảnh thiết bị có độ phân giải thấp và độ phân giải cao để minh họa ý tưởng cốt lõi về độ bao phủ pixel / chấm - cần nhiều pixel thiết bị (chấm) hơn để bao phủ vùng 1px x 1px trên thiết bị có độ phân giải cao ở độ phân giải thấp, điều đó có nghĩa là các truy vấn CSS được sử dụng rộng rãi cho hiển thị võng mạc thực sự giống với những gì bạn phải cung cấp (nhưng có nhiều ngưỡng hơn) cho Thiết kế Vật liệu và tất cả các thiết bị di động.

Kết luận, sử dụng tỷ lệ Mật độ MD được Google khuyến nghị thực hành tốt nhất hoặc nếu bạn cố định độ chính xác hoặc thiết kế của bạn cần nhất quán tuyệt đối về kích thước vật lý: sử dụng chuyển đổi chính xác bằng cách sử dụng các giá trị ppi / dpi của cụ thể hoặc phổ biến các thiết bị (khá điên rồ), những gì bạn có thể dễ dàng kiểm tra trên công cụ trực tuyến của Google resizer vì chúng tôn trọng các ngưỡng phổ biến được đề xuất trong MD Guide ở vị trí đầu tiên và quy tắc phân chia cho tỷ lệ và tên loại hiển thị có liên quan (xlộng, trung bình, v.v. ) thực hiện trong đó.

Vì vậy, hãy kiên trì với các tỷ lệ MD từ bảng nhớ rằng kích thước pixel bằng dp tham chiếu là cho độ phân giải mdpi (160) và bạn sẽ ổn.