Материальный дизайн — Макет: Единицы измерения и размеры
Перевод раздела Units and measurements официальной документации Google: http://www.google.com/design/spec/material-design/.
Некоторые единицы измерения в различном контексте имеют различные значения. В этой главе описано использование устройство-независимых пикселей, масштабируемых пикселей, а также таких идей как плотность пикселей.
Плотность пикселей
Количество пикселей, помещающихся в одном дюйме, называют «плотностью пикселей». Экраны с высокой плотностью имеют больше пикселей на дюйм, чем экраны с низкой плотностью. В результате элементы UI (например, кнопка) выглядят крупнее на устройствах с экранами с низкой плотностью и меньше на экранах с высокой плотностью.
Dpi, или разрешение экрана, обозначает количество пикселей конкретного дисплея.
dpi = ширина (или высота) экрана в пикселях / ширина (или высота) экрана в дюймах
Не зависящие от плотности пиксели (dp)
«Независимость от плотности» означает одинаковое отображение элементов UI на экранах с различной плотностью.
Не зависящие от плотности пиксели — это гибкие единицы измерения, которые на любом экране масштабируются до одного и того же размера. Разрабатывая приложения под Android, используйте dp для одинакового отображения элементов на экранах с различной плотностью.
Разрешение экрана | Ширина экрана в пикселях (dpi * ширина в дюймах) |
Ширина экрана в не зависящих от плотности пикселях |
---|---|---|
120 dpi | 180 px | 240 dp |
160 dpi | 240 px | |
240 dpi | 360 px |
Если у вас 3 экрана, каждый шириной 1,5 дюйма, но при этом все они имеют различные разрешения, ширина каждого экрана все равно составит 240dp.
dp равен одному физическому пикселю на 160 dpi экране. Для расчета dp:
dp = (ширина в пикселях * 160) / dpi
В процессе написания CSS используйте px в местах, где указано dp или sp. Dp следует использовать только при разработке под Android.
Масштабируемые пиксели (sp)
При разработке под Android масштабируемые пиксели (sp) служат той же цели, что и dp, но используются в шрифтах. По умолчанию значение sp совпадает с используемым по умолчанию значением dp.
Основное отличие между sp и dp заключается в том, что sp сохраняет настройки шрифта пользователя. Пользователи, настроившие более крупный размер шрифта для улучшения читабельности, увидят шрифт такого размера, который будет совпадать с их предпочтениями.
Проектирование макетов с использованием dp
При проектировании макетов под экран рассчитывайте размеры элемента в dp:
dp = (ширина в пикселях * 160) / dpi
Например, иконка размеров 32 x 32 px при 320 dpi будет иметь размеры 16 x 16 dp.
Масштабирование изображений
Используя следующие соотношения сторон, можно масштабировать изображения, чтобы они выглядели одинаково на экранах с различным разрешением:
Разрешение | dpi | Пиксельный коэффициент | Размер изображения (в пикселях) |
---|---|---|---|
xxxhdpi | 640 | 4.0 | 400 x 400 |
xxhdpi | 480 | 3.0 | 300 x 300 |
xhdpi | 320 | 2.0 | 200 x 200 |
hdpi | 240 | 1.5 | 150 x 150 |
mdpi | 160 | 1.0 | 100 x 100 |
P.S. Это тоже может быть интересно:
None Found
Отлично, хорошо что перевел
Возможно использовать dp sp в создании сайтов для мобильных устройств? т.е. через html и css(js) код?