Що таке одиниці 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 говорить так:

пікселів; 1px дорівнює 1/96 з 1in

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: 18px на всіх екранах.

Тоді вашими ідеальними "ем" стануть:

h5 { 
 font-size: 1.79904em;
 }

без досконалості використовувати 18/10:

h5 { 
 font-size: 1.8em;
 }

Згідно з Google Chrome ви отримуєте 18.0096px;