Як конвертувати між Android DP та CSS px?

Я бачу, що це, мабуть, питання noob, але це мене справді бентежить.

Я читаю документи з Google Material Design, а також деякі його реалізації в css. Специфікація написана в Android dp, тоді як css-коди використовуються pxяк одиниця довжини.

Що мене бентежить, що в css-реалізаціях часто використовується точне значення з специфікації, наприклад, тост повинен мати :

Висота однолінійної закуски: заввишки 48 dp

Мінімальна ширина: 288 dp

Закруглений кут 2 dp

відповідний CSS :

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

На моєму теперішньому розумінні, Android, DPяк правило, відображається у розмірі одного пікселя на екрані 160dpi, тоді як CSS pxвизначається як кут зору. То чи pxтрапляється так, як dpколи ви бачите на деякій відстані? Якщо так, це загальна модель для використання pxяк dpу css, чи я повністю неправильно зрозумів CSS-код?

Я раніше нічого не знаю про розробку Android, і не про дизайнера. Дякуємо за будь-яку допомогу.

Я думаю, що прийняте неправильно. Css px - це фактично незалежний піксель пристрою (dip), і це звичайна модель використання px як dp у css.

Я вважаю, що повну відповідь на ваше запитання можна знайти тут:

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

Для перетворення dp в px потрібно враховувати розміри дисплея, до якого ви звертаєтесь. Чим більший DPI, тим більше пікселів вам доведеться затиснути в тому ж районі, щоб він виглядав добре і щоб уникнути пікселяції :

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

Наприклад:

Квадрат 3x3 dp в CSS або Photoshop повинен бути:

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 (ця резолюція буде використовуватися на пристроях наступного покоління)

Виходячи з вищесказаного, ваші калькулятори повинні виглядати так, використовуючи 3-кратний dp-множник для екранів XXHDPI:

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

Android автоматично зменшує зображення, якщо виявить, що роздільна здатність використовуваного пристрою нижча, тому ви можете сміливо розвиватись, маючи на увазі XXHDPI, оскільки це стосується більшості сучасних пристроїв високого класу на ринку.

Ось простий конвертер, який виконує роботу за вас: http://androidpixels.net/

W3C каже :

Таким чином, блок px захищає вас від необхідності знати роздільну здатність пристрою. Незалежно від того, чи є вихід 96 dpi, 100 dpi, 220 dpi або 1800 dpi, довжина, виражена цілою кількістю px, завжди виглядає добре і дуже схожа на всіх пристроях (...)

І хоча це говорить:

Щоб отримати уявлення про зовнішній вигляд px, уявіть монітор комп'ютера CRT з 1990-х: найменша крапка, на якій він може відображатися, вимірює приблизно 1/100 дюйма (0,25 мм) або трохи більше. Одиниця px отримала свою назву від цих пікселів екрана.

Тут також сказано:

Насправді, CSS вимагає, щоб 1px був рівно 1/96 дюйма у всьому друкованому виході (...)

Беручи до уваги, що пристрої на екрані за замовчуванням налаштовані як 96dpi, найкраще припущення щодо того, як браузери інтерпретують піксель CSS:

96 css-px = ~ 1 inch

І це ми знаємо, що в Android:

160 dp = ~ 1 inch

Так:

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

І відповідно до цього:

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

Ну, я вважав, що це правильно, поки я не перевірив розміри тостів 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;

Отже, це конверсія від 1 до 1, і ми отримали, що браузери Android використовують:

1 css-px = 1 dp

А 96 css-px на дюйм використовується на інших пристроях, таких як настільні та ноутбуки.

На закінчення: пікселі css не залежать від пристрою dpi, а на пристроях Android 1 css-px дорівнює 1dp.

Правильної відповіді немає, насправді є дві:

1. Рекомендовано Google (наприклад, у курсі Udacity з матеріалів дизайну): Використовуйте просту конверсію, яка у багатьох випадках становить 1: 1, як у бібліотеці Polymer. Наприклад, для відображення сітківки неправильно , тому замість 1: 1 використовуйте коефіцієнт щільності, наведений у таблиці пристроїв, в офіційному Посібнику з проектування матеріалів ( таблиця із співвідношеннями та конкретними показниками для деяких популярних пристроїв ) та надайте відповідні запити @media для пороги та активи роздільної здатності , припускаючи, що 1dp дорівнює 1px для дисплея mdpi (160dpi / ppi) .

Примітка: загальна ідея: внизу сторінки: Масштабування зображення з деяким зображенням для візуалізації співвідношень для кількох порогів роздільної здатності екрана (зображення точки перерви)

2. якщо ви хочете надмірно узгоджувати свою конструкцію для певних пристроїв , вам слід зробити ще кілька досліджень та розрахунків, а що важливіше - купу більше @media запитів, щоб підтримувати стільки пристроїв, скільки ви хочете, і забезпечити резервний запас (за допомогою метод, згаданий на 1-му місці) для тих, кого ти так не хвилюєш.

Ось більш детальна інформація для тих, хто хоче більше зануритися в цю тему, але це пояснення та логіка, вищезазначене є повною відповіддю :

Вся справа в тому, що "щільність пікселів", згідно з офіційним керівництвом Material Design (Макет> Одиниці та вимірювання), є:

кількість пікселів, що вміщуються в дюйм.

Отже, в основному щільність пікселів - це нова назва для значення ppi або оскільки багато людей не визнають це окремою річчю, значення dpi.

Визначення 1dp відповідно до цього ж посібника:

Дп дорівнює одному фізичному пікселю на екрані з щільністю 160 . Для обчислення dp:

dp = (ширина в пікселях * 160) / щільність екрана

При написанні CSS використовуйте px там, де вказано dp або sp. Dp потрібно використовувати лише при розробці для Android.

Основним принципом проектування матеріалів є підтримка послідовних фізичних розмірів на різних платформах, що спричиняє проблему роздільної здатності робочого столу, ppi (/ dpi) та пікселя css, і в цьому випадку слід дотримуватися обчислення dp так само, як у випадку з Android пристроїв, і це неправда, що більшість екранів мають 96ppi (це припущення, що важливо для CSS), значна частина з них має трохи вищий ppi, і якщо врахувати не тільки традиційний робочий стіл, але і звичайні ноутбуки або планшети, або такі «конвертовані», як Surface, необхідні для конвертації: вони зазвичай коливаються від 100-130 ppi, тож сказано, що я зараз використовую 127ppi:

100% = 160ppi -> фізична ширина 1 пікселя = 1dp -> прямокутник 100x100px = 100x100dp

79% = 127ppi -> фізична ширина 1 пікселя = ca. 0,8dp -> прямокутник 100x100px = 80x80dp

Хоча dp є чистою та новою одиницею лише для Android, вам слід зробити кілька розрахунків для адаптації макетів MD, які входять у dp. Якщо ви хочете мати більше уявлення про те, наскільки великим буде конкретний елемент у фізичному сенсі, найбільш корисним для цілей питання є ідеальне значення діапазону сенсорного розміру, наведене в інструкціях щодо матеріального дизайну для конкретних пристроїв ** Нижче значення dp фізичний. ** Значення dp змінюється, але фізичне залишається таким же.

Проблема, чому потрібно обчислювати одиниці, детальніше пояснюється в посібнику для Android API (Перетворення dp-одиниць у піксельні одиниці), і воно все ще стосується елементів, стилізованих за допомогою CSS:

У деяких випадках вам потрібно буде виразити розміри в dp, а потім перетворити їх> у пікселі.

Уявіть програму, в якій жест прокрутки чи перекидання розпізнається після переміщення пальцем користувача принаймні на 16 пікселів. На базовому екрані користувач повинен рухатись на 16 пікселів / 160 точок на дюйм, що дорівнює 1/10 дюйма (або 2,5 мм) до того, як жест розпізнається. На пристрої з дисплеєм високої щільності (240 dpi) користувач повинен рухатись на 16 пікселів / 240 dpi, що дорівнює 1/15 дюйма (або 1,7 мм). Відстань значно коротша, і програма, таким чином, видається більш чутливою до користувача.

Раніше згадане перетворення полімеру 1: 1, ймовірно, пов'язане з тим, що щільність 96dpi, або навіть та, яку я дав, знаходиться десь із низькою або навіть (як у випадку 96dpi) групою, навіть нижче її. Беручи до уваги, що значення dp не є css прийнятим, простіше припустити, що коефіцієнт щільності (0,75 - для низьких, 1,0 середній тощо) - це той, який слід використовувати для спрощення та кратного розміру підтримка екранів, яка показана в таблиці пристроїв для згаданого раніше проектування матеріалів. Він навіть згадується як один з найкращих практик у цитованому вище розділі посібника з API API. І ось де перетворення полімерів 1: 1 може бути хорошим, оскільки багато пристроїв мають коефіцієнт щільності на рівні 1.

Повернення до останньої дилеми: css px, якщо ви вирішили зануритися в тонкі нюанси різних пристроїв. Якщо ви не такий цікавий, просто дотримуйтесь коефіцієнт щільності з таблиці MD. Але якщо ви перфекціоніст, це суть пікселів і фізичних розмірів пікселів CSS має ідеальне (і досить просте пояснення) у Рекомендації кандидата W3C:

В абсолютних одиницях довжин фіксуються по відношенню один до одного і прикріплені до деякого фізичного виміру. Вони в основному корисні, коли відоме вихідне середовище. Абсолютні одиниці складаються з фізичних одиниць ('in', 'cm', 'mm', 'pt', 'pc', 'q') та одиниці візуального кута ('px') :

Для читання на відстані руки 1px таким чином відповідає приблизно 0,26 мм (1/96 дюйма).

Примітка. Зауважте, що це визначення піксельної одиниці та фізичних одиниць відрізняється від попередніх версій CSS. Зокрема, у попередніх версіях CSS піксельна одиниця та фізичні одиниці не були пов’язані між собою фіксованим співвідношенням: фізичні одиниці завжди були прив'язані до своїх фізичних вимірювань, тоді як піксельна одиниця буде змінюватись, щоб найбільш точно відповідати опорному пікселю. (Ця зміна була внесена через те, що занадто багато існуючого контенту покладається на припущення 96dpi, а порушення цього припущення порушує вміст.)

Це нове визначення px (з урахуванням фізичних розмірів) заповнює проміжок між CSS-пікселями та dps і дозволяє переконатися, що за допомогою простих обчислень вимірювання так зване вихідне середовище, яке в даному випадку є послідовним (у фізичному сенсі ) Макет MD , залишається однаковим на різних пристроях та платформах. Більше того, і Керівні принципи W3C, і MD використовують зображення пристроїв із низькою та високою роздільною здатністю, щоб проілюструвати основну ідею покриття пікселів / крапок - більше пікселів пристрою (крапок) потрібно для покриття області 1 пікселем на 1 пікс на пристрої з високою роздільною здатністю, ніж на низькій роздільній здатності, це означає, що широко використовувані в CSS запити для відображення сітківки - це те саме, що вам потрібно надати (але з більшою кількістю порогових значень) для Material Design та всіх мобільних пристроїв.

Підсумовуючи, або використовуйте коефіцієнт щільності MD, який найкраще рекомендує Google , або якщо ви чітко визначені, або ваш дизайн повинен бути абсолютно узгоджений щодо фізичних розмірів: використовуйте точне перетворення, використовуючи значення ppi / dpi для конкретних або загальних пристроїв (що досить божевільно), що ви можете легко перевірити на веб-інструменті Google resizer, оскільки вони в першу чергу поважають загальні пороги, запропоновані в MD Guide, та правила поділу щодо співвідношення та відповідних назв типів відображення (xlarge, medium та ін. ) реалізовані в ньому.

Тож дотримуйтесь співвідношень MD з таблиці, пам’ятаючи, що довідковий dp, розмір пікселя, дорівнює роздільній здатності mdpi (160), і ви будете хороші.