CSS ile dp (yoğunluktan bağımsız pikseller) birimleri nedir?

Android için, kullanıcılar UI öğeleri için dp (yoğunluktan bağımsız pikseller) ölçümlerinin kullanılmasını önermektedir ve 48dpbir düğme yüksekliği için kullanmak gibi mevcut kurallar vardır .

Bir web uygulaması üzerinde çalışıyorum ve UI tasarımı hakkında Android tasarım standartlarına uymadığını söyleyen çok eleştiri alıyorum. Açıkçası, uygulamam Android Holo teması yerine CSS ve HTML kullandığından farklı görünecek, ancak yine de mümkün olduğu kadar uyumlu hale getirmek istiyorum. Ancak CSS, yoğunluktan bağımsız ölçümlere izin vermez.

Uygulamamı farklı çözünürlükler ve piksel yoğunluklarında test ettiğimde iyi görünmüyor ve bazen orantısız olduğu için işlevsel bile değil. CSS, Android yerel geliştirme gibi dp birimlerine sahip değil, ancak bazı alternatiflerin ne olduğunu merak ediyordum.

Javascript kullanarak piksel yoğunluğunu bir şekilde alabilir ve her şeyi manuel olarak uygun şekilde ölçekleyebilir miyim? Tüm çözünürlüklerde / yoğunluklarda güzel görünen ve çalışan bir web uygulaması yapmanın en iyi yolu nedir?

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

CSS'de bulunan en yakın birim, görüntü alanı-yüzde birimleridir.

• vw - İlk içeren bloğun genişliğinin% 1'ine eşittir.
• vh - İlk içeren bloğun yüksekliğinin% 1'ine eşittir.
• vmin - vw veya vh'nin küçüğüne eşittir.
• vmax - vw veya vh'nin büyük olanına eşittir.

Bu birimleri desteklemediğinin farkında olan tek mobil tarayıcı Opera'dır. http://caniuse.com/#feat=viewport-units

Şu anda kabul edilen cevaba katılmıyorum. Uber5001'in önerdiği gibi px, a sabit bir birimdir ve Android'e özgü çabalara benzer bir ruh halindedir dp.

Başına Malzeme spec :

CSS yazarken, dp veya sp belirtilen her yerde px kullanın. Dp'nin yalnızca Android için geliştirmede kullanılması gerekir.

bunlara ek olarak

Web için tasarım yaparken dp'yi px (piksel için) ile değiştirin.

Kullanın rem.

Kök öğenin yazı tipi boyutu ve diğer UI öğelerinin boyutu için çok iyi bir temel birimdir.

Aynı mutlak boyutu (santimetre cinsinden) kullanırsanız, metin ve diğer öğeler mobil cihazlarda çok büyük veya masaüstünde çok küçük olur.

Aynı miktarda piksel kullanılırsa, metin ve diğer öğeler mobil cihazlarda çok küçük veya masaüstünde çok büyük olacaktır.

remDiyor çünkü birim yerinde olduğunu "Hey, normal bir metin nasıl olması gerektiğini büyüktür." Diğer UI öğelerinin boyutunu buna dayandırmak oldukça makul bir seçimdir.

CSS3'te, web'de Android'in olmadığını söylemek daha doğru olabilir px. CSS3'ün özelliği şunupx söylüyor:

pikseller; 1px, 1in'in 1 / 96'sına eşittir

px gelecekte istediğiniz ölçüm olabilir.

CSS3'ten itibaren, gerçekten cihazdan bağımsız olan CSS birimleri yoktur. Mutlak uzunluklar için W3C spesifikasyonuna bakın . Özellikle, mutlak birimler fiziksel ölçümleriyle eşleşmeyebilir.

Fiziksel birimler amacına sadık olsaydı, puan gibi bir şey kullanabilirsiniz; noktalar dps'ye yeterince yakın:

1 in = 72 pt
1 in = 160 dp

1 dp = 72 / 160 pt

SCSS kullanıyorsanız, pts cinsinden dönmek için bir işlev yazabilirsiniz:

@function dp($_dp) {
  @return (72 / 160) * $_dp + pt;
}

Ve onu kullanın:

.shadow-2 {
  height: dp(2);
}

Rem birimlerine dayalı bir arayüz ne olacak?

Konuyla ilgili onaylayacak kadar tecrübeli değilim, ancak görüntü alanı boyutuna göre kök öğeye bir yazı tipi boyutu uygulamak için biraz matematik yapabilirsiniz ve tüm arayüz buna göre ayarlanır. Bu şeyler henüz benim için biraz büyücülük.

Neden puan kullanmıyorsunuz, cihazlar arasında tutarlı bir boyuttadır. Ve ekran boyutuna bağlıdır. Geleneksel yayıncılıktan geldiği için çoğu buna aşina değil.

Vw (herhangi bir cihaz için ekran genişliği) ve em arasında biraz karışım kullanmaya ne dersiniz? Burada yazı tipi boyutu, cihazınızın ekran genişliğine bağlı olarak dinamik olarak değişiyor. Sonraki kuralı ana CSS dosyanızda kullanın:

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

(iPhone 6/7/8 için genişlik 375 pikseldir, 320 piksele (iPhone5) vb. değiştirin)

Her durumda mükemmel çalışıyor. Sadece bir eksi var. Hedefiniz "piksel mükemmel" ise, o zaman noktadan sonra büyük sayılar kullanmanız gerekir.

Örnek: hedefiniz tüm ekranlarda yazı tipi boyutu h5: 18 pikseldir.

O zaman mükemmel "em" iniz:

h5 { 
 font-size: 1.79904em;
 }

mükemmellik olmadan 18/10 kullanın:

h5 { 
 font-size: 1.8em;
 }

Google Chrome'a ​​göre 18.0096px alırsınız;