Блог

Я не спрашиваю, в чем разница между dp, sp и px.

Я разрабатываю веб-сайт на основе нового дизайна материалов Google, все измерения приведены в dp (для сетки) и sp (для текста). Мой вопрос в том, как они переводятся в пиксели. Я разрабатываю веб-сайты более 4 лет, и все измерения (сетка и шрифт) указаны в пикселях.

Например:

1. Заголовок равен 24sp, скольким пикселям это соответствует? (это не 24 пикселя, я пытался сопоставить их, это около 28 пикселей, но должны быть стандартные системы измерения).
2. Руководство по сетке: «Все компоненты выровнены по базовой сетке размером 8 dp». — сколько пикселей это соответствует?

1px = ?dp =?sp на рабочем столе или любом обычном мониторе или мобильном устройстве?

Я рекомендую прочитать определения dp и sp от Google, которые можно найти в документах Android, здесь и здесь.

Также есть некоторая полезная информация в замечательном руководстве дизайнера по DPI.

Я думаю, что ответ будет:

1px = 1dp = 1sp на любом обычном мониторе или мобильном устройстве.

Как я до этого додумался?

Поскольку пиксель является пикселем, для andriod используются dp и sp, поскольку они используются для собственных приложений, которые должны масштабироваться, а dpi каждого экрана отличается в зависимости от устройства. Для настольных компьютеров все то же самое, конечно, веб-сайт должен быть совместим / адаптивен для мобильных устройств, но поскольку веб-сайт загружается в браузере, некоторые дополнительные медиа-запросы (на основе рекомендаций) будут выполнять эту работу.

Если у кого-нибудь есть какой-то другой логический вывод, пожалуйста, поделитесь

Надежное эмпирическое правило заключается в использовании 1 px = 1 dp.

Это должно дать вам хороший безопасный размер практически на любом устройстве. На некоторых устройствах, в частности на iPad (обычном), он будет казаться немного большим.

Вот почему:

«dp соответствует физическому размеру пикселя с разрешением 160 точек на дюйм» (https://developer.android.com/training/multiscreen/screendensities.html#TaskUseD )

160 точек на дюйм означает:

160 точек = 1 дюйм

Поэтому:

160 dp = 1 дюйм (25,4 мм)

Итак, когда Google рекомендует, чтобы кнопки имели осязаемую целевую высоту 48 dp, они говорят, что они должны быть высотой 0,3 дюйма (7,6 мм).

Итак, сколько это пикселей? Ну, это зависит от устройства.

Примеры для высоты кнопки 48 dp (7,6 мм):

• iPad mini: 48 пикселей, почему: Экран iPad mini имеет ширину около 120 мм и использует 768 пикселей для заполнения этого пространства. Следовательно, вам нужно 162 пикселя, чтобы занимать дюйм (25,4 мм), или 48 пикселей для вашей кнопки высотой 7,6 мм.

• Kindle Fire (7 «): 43 пикселя

• Kindle Fire (6 «): 50 пикселей

• iPhone: 48 пикселей

• Nexus 7: 48 пикселей

• Обычный iPad: 39 пикселей

(Возможно, я немного ошибся с округлением вверх / вниз.. 48 мне нравится больше, чем 49!)

Мм экрана и ширина CSS в пикселях для примеров: я рассчитал ширину экрана, используя размеры экрана CSS в пикселях и длину диагонали.

• iPad mini: разрешение 1024 x 768 и диагональ 201 мм = ширина 120 мм.
• Kindle Fire 7 «: разрешение 858 x 533 и диагональ 178 мм = ширина 94 мм.
• Kindle Fire 6 «: разрешение 853 x 533 и диагональ 152 мм = ширина 81 мм.
• iPhone: разрешение 568 x 320 и диагональ 102 мм = ширина 50 мм.
• Nexus 7: разрешение 960 * 600 и диагональ 178 мм = ширина 94 мм.
• Обычный iPad: разрешение 1024 x 768 и диагональ 246 мм = ширина 148 мм.

Обратите внимание, что для вычисления высоты кнопки в пикселях вам нужно использовать размеры устройства CSS в пикселях. Эти цифры не обязательно совпадают с разрешениями, указанными в спецификациях.

Все они примерно эквивалентны для большинства вариантов использования.

Источник

Чтобы сохранить видимый размер вашего пользовательского интерфейса на экранах с разной плотностью, вы должны спроектировать свой пользовательский интерфейс, используя в качестве единицы измерения пиксели, не зависящие от плотности (dp). Один dp — это виртуальная пиксельная единица, которая примерно равна одному пикселю на экране средней плотности (160 точек на дюйм; плотность «базовой линии»). Android преобразует это значение в соответствующее количество реальных пикселей для плотности друг друга.

Для примера рассмотрим два устройства на рисунке 1. Если бы вы определили вид шириной «100 пикселей», он выглядел бы намного больше на устройстве слева. Таким образом, вы должны вместо этого использовать «100dp», чтобы убедиться, что он отображается одинакового размера на обоих экранах.

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

Рисунок 1. Два экрана одинакового размера могут иметь разное количество пикселей