Для Android люди рекомендуют использовать измерения, независимые от измерения плотности (dp) для элементов пользовательского интерфейса, и существуют соглашения, которые существуют, например, использование 48dp для высоты кнопки и т.д.
Я работаю над приложением CSS/HTML/Javascript, и я получаю много критики в дизайне пользовательского интерфейса, говоря, что он не соответствует стандартам дизайна Android. Очевидно, что мое приложение будет выглядеть по-другому, поскольку оно использует CSS/HTML/Javascript вместо темы Android Holo, но я все равно хотел бы сделать его максимально возможным. Однако CSS не позволяет проводить измерения, не зависящие от плотности. Когда я тестирую свое приложение на разных разрешениях и плотности пикселей, он выглядит не очень хорошо, а иногда он не соответствует пропорциям, поэтому он даже не работает. У CSS нет dp-блоков, например, для разработки на базе Android, но мне было интересно, каковы некоторые альтернативы. Могу ли я каким-то образом получить плотность пикселей с помощью Javascript и вручную масштабировать все соответственно? Каков наилучший способ создания приложения CSS/HTML/Javascript, которое выглядит и прекрасно работает во всех разрешениях/плотностях?
http://www.w3.org/TR/css3-values/#lengths
Ближайшей единицей, доступной в CSS, являются единицы измерения в окне просмотра.
Единственный мобильный браузер, который должен знать об этом, не поддерживает эти устройства, - это Opera. http://caniuse.com/#feat=viewport-units
Я не согласен с принятым в настоящее время ответом. Как предполагает uber5001, px является фиксированной единицей и аналогичным образом работает с Android-specificc dp.
При написании CSS используйте px, где указано dp или sp. Dp нужно использовать только для разработки для Android.
В CSS3 может быть более точным сказать, что в Интернете нет Android px. Спецификация для CSS3 px говорит следующее:
pixels; 1px is equal to 1/96th of 1in
px может быть измерение, которое вы хотите в будущем.
Как насчет интерфейса, основанного на единицах rem?
Я не достаточно опытен, чтобы подтвердить это, но я думаю, что вы можете сделать некоторую математику на основе размера видового экрана, чтобы применить размер шрифта в корневом элементе, и весь интерфейс будет соответствующим образом скорректировать. Этот материал для меня еще немного колдовства.
Использовать rem.
Это размер шрифта корневого элемента и очень хороший базовый блок для размера других элементов пользовательского интерфейса.
Если бы использовался один и тот же абсолютный размер (в сантиметре), текст и другие элементы были бы слишком большими на мобильных устройствах или слишком малыми на рабочем столе.
Если бы использовалось то же количество пикселей, текст и другие элементы были бы слишком малы на мобильном телефоне или слишком велики на рабочем столе.
Блок rem находится на месте, потому что он говорит: "Эй, как большой нормальный текст должен быть". Основываясь на других элементах пользовательского интерфейса, это довольно разумный выбор.
Как и в случае 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);
}
Почему бы не использовать точки, это согласованный размер для всех устройств. И относительно размера экрана. Большинство из них не знакомы с ним, поскольку оно происходит от традиционной публикации.