Связь между dp - sp и PX
Я не спрашиваю, в чем разница между dp, sp и px.
Я разрабатываю веб-сайт на основе нового дизайна материалов Google, все измерения в dp (для сетки) и sp(для текста). Мой вопрос, как они переводят в пиксели. Я занимаюсь дизайном сайтов более 4 лет, и все размеры (сетка и шрифт) представлены в пикселях.
Например:
- Заголовок 24sp, сколько пикселей это соответствует? (это не 24 пикселя, я пытался сопоставить их, это около 28 пикселей, но должны быть стандартные измерительные системы).
- Руководство по сетке: "Все компоненты выровнены по квадратной базовой линии 8 dp". - сколько пикселей это соответствует?
1px =? Dp =? Sp на рабочем столе или любом среднем мониторе или мобильном устройстве?
3 ответа
Я рекомендую прочитать определения Google dp и sp, которые можно найти в документации по Android здесь и здесь.
Там также есть некоторая полезная информация в замечательном Руководстве дизайнера по DPI.
Я думаю, что ответ будет:
1px = 1dp = 1sp на любом среднем мониторе или мобильном устройстве.
Как я это придумал?
Поскольку пиксель - это пиксель, для andriod используются dp и sp, потому что они используются для собственных приложений, которые должны масштабироваться, а dpi каждого экрана различается в зависимости от устройства. Для настольных компьютеров все это одно и то же, конечно, веб-сайт должен быть совместимым / отзывчивым для мобильных устройств, но поскольку веб-сайт загружается в браузер, некоторые дополнительные медиа-запросы (на основе руководящих принципов) сделают свою работу.
Если у кого-то есть какой-то другой логический вывод, пожалуйста, поделитесь
Безопасное правило - использовать 1 px = 1 dp.
Это должно дать вам хороший безопасный размер практически на любом устройстве. Он будет казаться немного большим на некоторых устройствах, особенно на iPad (обычном).
Вот почему:
"Dp соответствует физическому размеру пикселя при 160 dpi" ( https://developer.android.com/training/multiscreen/screendensities.html)
160 точек на дюйм означает:
160 точек = 1 дюйм
Следовательно:
160 dp = 1 дюйм (25,4 мм)
Поэтому, когда Google рекомендует, чтобы у кнопок была сенсорная высота цели 48 точек на дюйм, они говорят, что они должны быть ростом в 7 дюймов (0,3 дюйма).
Так сколько же это px? Ну, это зависит от устройства.
Примеры высоты кнопки 48 dp (7,6 мм):
iPad mini: 48 пикселей Почему: экран iPad mini имеет ширину около 120 мм и использует 768 пикселей для заполнения этого пространства. Поэтому вам нужно 162 пикселя, чтобы занять дюйм (25,4 мм), или 48 пикселов для высоты кнопки 7,6 мм.
Kindle Fire (7 "): 43 px
Kindle Fire (6 "): 50 пикселей
iPhone: 48 пикселей
Nexus 7: 48 px
Обычный iPad: 39 пикселей
(Возможно, я немного обдумал округление вверх / вниз.. Мне нравится 48 лучше, чем 49!)
Размер экрана в миллиметрах и ширина пикселя CSS для примеров: я рассчитал ширину экрана, используя размеры экрана CSS px и длину диагонали.
- 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 мм.
Обратите внимание, что для вычисления высоты пикселя кнопки px необходимо использовать размеры устройства px в CSS. Эти цифры не обязательно совпадают с разрешениями, указанными в спецификации.
Все они примерно эквивалентны для большинства случаев использования.
ИсточникРисунок 1. Два экрана одинакового размера могут иметь разное количество пикселей.Чтобы сохранить видимый размер пользовательского интерфейса на экранах с разной плотностью, вы должны разработать пользовательский интерфейс, используя в качестве единицы измерения пиксели, не зависящие от плотности (dp). Один dp - это виртуальный пиксель, который примерно равен одному пикселю на экране средней плотности (160dpi; "базовая" плотность). Android переводит это значение в соответствующее количество реальных пикселей для плотности друг друга.
Например, рассмотрим два устройства на рисунке 1. Если вы зададите представление шириной "100 пикселей", оно будет намного больше на устройстве слева. Поэтому вместо этого вы должны использовать "100dp", чтобы обеспечить одинаковый размер на обоих экранах.
Однако при определении размеров текста вы должны вместо этого использовать масштабируемые пиксели (sp) в качестве единиц (но никогда не используйте sp для размеров макета). Единица sp имеет тот же размер, что и dp, по умолчанию, но ее размер изменяется в зависимости от предпочтительного размера текста пользователя.
