CSS/HTML - dp (независимые от плотности) единицы?

Для Android люди рекомендуют использовать измерения, независимые от измерения плотности (dp) для элементов пользовательского интерфейса, и существуют соглашения, которые существуют, например, использование 48dp для высоты кнопки и т.д.

Я работаю над приложением CSS/HTML/Javascript, и я получаю много критики в дизайне пользовательского интерфейса, говоря, что он не соответствует стандартам дизайна Android. Очевидно, что мое приложение будет выглядеть по-другому, поскольку оно использует CSS/HTML/Javascript вместо темы Android Holo, но я все равно хотел бы сделать его максимально возможным. Однако CSS не позволяет проводить измерения, не зависящие от плотности. Когда я тестирую свое приложение на разных разрешениях и плотности пикселей, он выглядит не очень хорошо, а иногда он не соответствует пропорциям, поэтому он даже не работает. У CSS нет dp-блоков, например, для разработки на базе Android, но мне было интересно, каковы некоторые альтернативы. Могу ли я каким-то образом получить плотность пикселей с помощью Javascript и вручную масштабировать все соответственно? Каков наилучший способ создания приложения CSS/HTML/Javascript, которое выглядит и прекрасно работает во всех разрешениях/плотностях?

Ответ 1

http://www.w3.org/TR/css3-values/#lengths

Ближайшей единицей, доступной в CSS, являются единицы измерения в окне просмотра.

vw - равно 1% от ширины исходного содержащего блока.
vh - равно 1% от высоты исходного содержащего блока.
vmin - равно меньшему из vw или vh.
vmax - равно больше vw или vh.

Единственный мобильный браузер, который должен знать об этом, не поддерживает эти устройства, - это Opera. http://caniuse.com/#feat=viewport-units

Ответ 2

Я не согласен с принятым в настоящее время ответом. Как предполагает uber5001, px является фиксированной единицей и аналогичным образом работает с Android-specificc dp.

Per Материал спецификации:

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

Ответ 3

В CSS3 может быть более точным сказать, что в Интернете нет Android px. Спецификация для CSS3 px говорит следующее:

pixels; 1px is equal to 1/96th of 1in

px может быть измерение, которое вы хотите в будущем.

Ответ 4

Как насчет интерфейса, основанного на единицах rem?

Я не достаточно опытен, чтобы подтвердить это, но я думаю, что вы можете сделать некоторую математику на основе размера видового экрана, чтобы применить размер шрифта в корневом элементе, и весь интерфейс будет соответствующим образом скорректировать. Этот материал для меня еще немного колдовства.

Ответ 5

Использовать rem.

Это размер шрифта корневого элемента и очень хороший базовый блок для размера других элементов пользовательского интерфейса.

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

Если бы использовалось то же количество пикселей, текст и другие элементы были бы слишком малы на мобильном телефоне или слишком велики на рабочем столе.

Блок rem находится на месте, потому что он говорит: "Эй, как большой нормальный текст должен быть". Основываясь на других элементах пользовательского интерфейса, это довольно разумный выбор.

Ответ 6

Как и в случае CSS3, нет блоков CSS, которые действительно независимы от устройства. См. http://www.w3.org/TR/css3-values/#absolute-lengths. В частности, абсолютные единицы могут не соответствовать их физическим измерениям.

Если физические единицы были верны своей цели, вы могли бы использовать что-то вроде очков; точки достаточно близки к dps:

1 in = 72 pt
1 in = 160 dp

= > 1 dp = 72/160 pt

Если вы используете SCSS, вы можете написать функцию для возврата в pts:

@function dp($_dp) {
  @return (72 / 160) * $_dp + pt;
}

И используйте его:

.shadow-2 {
  height: dp(2);
}

Ответ 7

Почему бы не использовать точки, это согласованный размер для всех устройств. И относительно размера экрана. Большинство из них не знакомы с ним, поскольку оно происходит от традиционной публикации.