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


90

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

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

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

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


Ответы:


24

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


Правильно ли отображаются эти единицы при развертывании в iOS?
jmhostalet

@jmhostalet Нет, это приводит к тому, что браузер входит в своего рода бесконечный цикл, поскольку высота области просмотра является динамической.
rookie1024 08

6
этот ответ неверен, потому что pxединица измерения в css (что противоречит интуиции) фактически уже не зависит от плотности пикселей - «пиксель css не является пикселем», об этом
написано

178

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

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

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

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

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


25
Это ответ. +1 за цитирование спецификации материалов.
Qix - МОНИКА БЫЛА ОФИЦИАЛЬНЫМ ОБРАЩЕНИЕМ

2
Из MDN: «Единица измерения не представляет собой физический дюйм на экране, а представляет 96 пикселей. Это означает, что независимо от реальной плотности пикселей экрана, предполагается, что она составляет 96 точек на дюйм. На устройствах с большей плотностью пикселей 1 дюйм будет меньше 1 физического дюйма. Точно так же мм, см и pt не являются абсолютной длиной ". developer.mozilla.org/en/docs/Web/CSS/…
Maciej Krawczyk

1
CSS-дюйм и физический дюйм - это две разные вещи. 1 дюйм CSS всегда равен 96 пикселям, независимо от плотности экрана. Таким образом, только на мониторе с разрешением 96 dpi дюйм CSS и физический дюйм можно считать равными.
Maciej Krawczyk

1
@MaciejKrawczyk Я понимаю основу вашего утверждения о несоответствии масштабов в пикселях. Я мог бы поспорить о том, что пиксель действительно является фиксированной единицей, и масштаб, который вы используете, не меняет этой базовой истины, но это отвлекающий маневр. Реальность такова, что в спецификации материала прямо указано использовать px везде, где предлагается dp. Учитывая, что Брэд спросил о стандартах дизайна Android, я дал канонический и, следовательно, правильный ответ.
Tohuw

2
Недавнее обновление (май 2018) для материала конструкции объясняет плотность пикселей в большей глубине material.io/design/layout/#pixel-density
закорючка

17

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

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

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

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

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


16

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

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

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


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

А 1 дюйм определяется как 96 пикселей. Единицы CSS, такие как in, mm, зависят от плотности пикселей.
Maciej Krawczyk

yo siempre use px en vez de dp y va bien
Иван Паредес

Взорван разум: OOOO
dwjohnston

12

Что касается 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);
}

10

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

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


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

1

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


0

Как насчет использования некоторого сочетания между 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 пикселей;

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.