Как конфертировать между Android DP и CSS px?

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

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

Меня смущает то, что реализации css часто используют точное значение из спецификации, например, тост должен иметь :

Высота одной закусочной: 48 дп

Минимальная ширина: 288 дп

2 dp закругленный угол

соответствующий CSS :

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

В моем текущем понимании Android DPобычно отображается с размером одного пикселя на экране с разрешением 160 точек на дюйм, в то время как 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 точек на дюйм, 100 точек на дюйм, 220 точек на дюйм или 1800 точек на дюйм, длина, выраженная в виде целого числа пикселей, всегда выглядит хорошо и очень похожа на всех устройствах (...)

И хотя это говорит:

Чтобы получить представление о внешнем виде пикселя, представьте компьютерный монитор с электронно-лучевой трубкой 1990-х годов: наименьшая точка, на которой он может отображать, составляет около 1/100 дюйма (0,25 мм) или чуть больше. Устройство px получило свое название от этих пикселей экрана.

Это также говорит:

Фактически, CSS требует, чтобы 1px был точно 1/96 дюйма во всей печатной продукции (...)

Учитывая, что по умолчанию экранные устройства настроены на 96 dpi, это лучшее предположение о том, как браузеры интерпретируют пиксель 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 (160 dpi / ppi) .

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

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

Вот более подробная информация для тех, кто хочет углубиться в тему, но это объяснение и логика позади, выше полный ответ :

Дело в том, что «плотность пикселей», согласно официальному руководству Material Design (Layout> Единицы и измерения), это:

количество пикселей, которые вписываются в дюйм.

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

Определение 1dp согласно тому же руководству:

Dp равен одному физическому пикселю на экране с плотностью 160 . Чтобы рассчитать дп:

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

При написании CSS используйте px везде, где указано dp или sp. Dp нужно использовать только при разработке под Android.

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

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

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

Хотя dp - это чистый и новый модуль только для Android, вы должны сделать некоторые расчеты, чтобы адаптировать макеты MD, которые все входят в dp. Если вы хотите получить еще какое-то представление о том, насколько большим будет конкретный элемент в физическом смысле, то наиболее полезным для цели вопроса является значение « Идеальный диапазон размеров прикосновения» в Руководстве по проектированию материалов для конкретных устройств ** Ниже значения dp физический. ** Значение dp изменяется, но физическое остается неизменным.

Проблема, для которой вам нужно вычислять единицы измерения, более подробно объясняется в руководстве по API Android (Преобразование единиц измерения dp в пиксельные единицы), и она все еще применяется для элементов, стилизованных с помощью CSS:

В некоторых случаях вам нужно будет выразить размеры в dp, а затем преобразовать их> в пиксели.

Представьте себе приложение, в котором жест прокрутки или пролистывания распознается после того, как палец пользователя сдвинется как минимум на 16 пикселей. На базовом экране пользователь должен переместиться на 16 пикселей / 160 точек на дюйм, что соответствует 1/10 дюйма (или 2,5 мм), прежде чем жест будет распознан. На устройстве с дисплеем высокой плотности (240 точек на дюйм) пользователь должен двигаться на 16 пикселей / 240 точек на дюйм, что соответствует 1/15 дюйма (или 1,7 мм). Расстояние намного короче, и поэтому приложение кажется более чувствительным к пользователю.

Ранее упомянутое преобразование полимера 1: 1, вероятно, связано с тем, что плотность 96 точек на дюйм, или даже та, которую я дал, находится где-то в группе низкой плотности или даже (как в случае 96 точек на дюйм), даже ниже ее. Принимая во внимание, что значение dp не является принятым css, проще предположить, что коэффициент плотности (0,75 - для низкого, 1,0 - средний и т. Д.) - тот, который следует использовать для упрощения и множественного размера. поддержка экранов, которая показана в таблице устройств для Material Design, упомянутой ранее. Это даже упоминается как одна из лучших практик в приведенной выше главе руководства по API Android. И вот где конверсия полимера 1: 1 может быть хорошей, так как многие устройства имеют коэффициент плотности на уровне 1.

Возвращаясь к последней дилемме: css px, если вы решите погрузиться в тонкие нюансы разных устройств. Если вы не очень интересуетесь, просто придерживайтесь коэффициента плотности из таблицы MD. Но если вы перфекционист, то суть отношения пикселей и физических размеров CSS имеет идеальное (и довольно простое объяснение) в рекомендации кандидата W3C:

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

Таким образом, для чтения на расстоянии вытянутой руки 1 пиксель соответствует примерно 0,26 мм (1/96 дюйма).

Примечание. Обратите внимание, что это определение пиксельной и физической единиц отличается от предыдущих версий CSS. В частности, в предыдущих версиях CSS единица пикселя и физические единицы не были связаны фиксированным соотношением: физические единицы всегда были привязаны к своим физическим измерениям, в то время как единица пикселя изменялась бы, чтобы наиболее точно соответствовать эталонному пикселю. (Это изменение было сделано из-за того, что слишком много существующего контента основывается на допущении 96 dpi, и нарушение этого допущения нарушает контент.)

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

В заключение, либо используйте коэффициент плотности MD, который лучше всего рекомендует Google , либо, если вы зациклены на точности, или ваш дизайн должен быть абсолютно согласованным с физическими размерами: используйте точное преобразование с использованием значений ppi / dpi конкретных или общих устройства (что довольно безумно), что вы можете легко протестировать с помощью онлайн-инструмента Google Resizer, поскольку они учитывают общие пороговые значения, предложенные в Руководстве по MD, в первую очередь, и правила деления для соотношения и соответствующих имен отображаемых типов (xlarge, medium и т. д.). ) реализовано в нем.

Поэтому придерживайтесь коэффициентов MD из таблицы, помня, что эталонный размер пикселя dp равен разрешению mdpi (160), и вы будете в порядке.