CSS-live.ru

Материальный дизайн — Макет: Единицы измерения и размеры

Перевод раздела Units and measurements официальной документации Google: http://www.google.com/design/spec/material-design/.

Некоторые единицы измерения в различном контексте имеют различные значения. В этой главе описано использование устройство-независимых пикселей, масштабируемых пикселей, а также таких идей как плотность пикселей.

Плотность пикселей

Количество пикселей, помещающихся в одном дюйме, называют «плотностью пикселей». Экраны с высокой плотностью имеют больше пикселей на дюйм, чем экраны с низкой плотностью. В результате элементы UI (например, кнопка) выглядят крупнее на устройствах с экранами с низкой плотностью и меньше на экранах с высокой плотностью.

Dpi, или разрешение экрана, обозначает количество пикселей конкретного дисплея.

dpi = ширина (или высота) экрана в пикселях / ширина (или высота) экрана в дюймах

layout_units_density1.png

Экран с высокой плотностью

layout_units_density2.png

Экран с низкой плотностью

Не зависящие от плотности пиксели (dp)

«Независимость от плотности» означает одинаковое отображение элементов UI на экранах с различной плотностью.

Не зависящие от плотности пиксели — это гибкие единицы измерения, которые на любом экране масштабируются до одного и того же размера. Разрабатывая приложения под Android, используйте dp для одинакового отображения элементов на экранах с различной плотностью.

layout_units_dp.png
Разрешение экрана Ширина экрана в пикселях
(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

2 комментария

  1. Возможно использовать dp sp в создании сайтов для мобильных устройств? т.е. через html и css(js) код?

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.