Что такое DP (плотность независимых пикселей) единиц с CSS?

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

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

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

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

7 60
android css web-applications user-interface gnu-screen

7 ответов:

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

ближайшей единицей, доступной в CSS, являются единицы видового экрана-процент.

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

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

24

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

на спецификация материала:

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

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

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

113

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

пикселей; 1px равен 1/96 от 1in

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

14

в 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);
}
11

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

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

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

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

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

10

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

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

8

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

1