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

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

Я работаю над веб-приложением, и меня много критикуют за дизайн пользовательского интерфейса, говоря, что он не соответствует стандартам дизайна Android. Очевидно, что мое приложение будет выглядеть по-другому, поскольку оно использует CSS и HTML вместо темы Android Holo, но я все же хотел бы, чтобы оно максимально соответствовало. Однако CSS не позволяет проводить измерения независимо от плотности.

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

Могу ли я каким-то образом получить плотность пикселей с помощью Javascript и соответствующим образом масштабировать все вручную? Как лучше всего создать веб-приложение, которое будет хорошо выглядеть и работать при любом разрешении / плотности?

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

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

Согласно спецификации материала :

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

Дополнительно

При разработке для Интернета замените dp на px (для пикселей).

Используйте rem.

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

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

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

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

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

пиксели; 1 пиксель равен 1/96 от 1 дюйма

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

Что касается CSS3, нет модулей CSS, которые действительно независимы от устройства. См. Спецификацию W3C по абсолютной длине . В частности, абсолютные единицы могут не соответствовать их физическим измерениям.

Если бы физические единицы соответствовали своему назначению, вы могли бы использовать что-то вроде очков; точки достаточно близки к 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);
}

А как насчет интерфейса, основанного на модулях rem?

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

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

Как насчет использования некоторого сочетания между vw (ширина экрана для любого устройства) и em? Здесь размер шрифта изменяется динамически в зависимости от ширины экрана вашего устройства. Используйте в своем основном файле CSS следующее правило:

font-size: calc(100vw * 10 / 375);

(ширина для iPhone 6/7/8 составляет 375 пикселей, измените ее на 320 пикселей (iPhone5) и т. д.)

Во всех случаях все идет отлично. Минус только один. Если ваша цель - «идеальный пиксель», тогда вам нужно использовать большие числа после точки.

Пример: ваша цель - размер шрифта h5: 18 пикселей на всех экранах.

Тогда ваш идеальный "em" будет:

h5 { 
 font-size: 1.79904em;
 }

без совершенства использовать 18/10:

h5 { 
 font-size: 1.8em;
 }

Согласно Google Chrome вы получаете 18.0096 пикселей;