O que são unidades dp (pixels independentes de densidade) com CSS?

Para Android, as pessoas recomendam o uso de medidas dp (pixels independentes de densidade) para elementos de interface do usuário, e existem convenções como usar 48dppara a altura de um botão, etc.

Estou trabalhando em um aplicativo da web e estou recebendo muitas críticas sobre o design da IU, dizendo que ele não está em conformidade com os padrões de design do Android. Obviamente, meu aplicativo terá uma aparência diferente, pois está usando CSS e HTML em vez do tema Android Holo, mas eu ainda gostaria de torná-lo o mais compatível possível. No entanto, o CSS não permite medições independentes de densidade.

Quando eu testo meu aplicativo em diferentes resoluções e densidades de pixel, ele não parece bom e, às vezes, está fora de proporção e nem mesmo funciona. CSS não tem unidades dp como o desenvolvimento nativo do Android, mas eu queria saber quais são algumas alternativas.

Posso de alguma forma obter a densidade de pixels usando Javascript e dimensionar tudo manualmente de forma adequada? Qual é a melhor maneira de fazer um aplicativo da web que tenha uma boa aparência e funcione bem em todas as resoluções / densidades?

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

A unidade mais próxima disponível em CSS são as unidades de porcentagem da janela de visualização.

• vw - Igual a 1% da largura do bloco inicial.
• vh - Igual a 1% da altura do bloco inicial.
• vmin - Igual ao menor de vw ou vh.
• vmax - igual ao maior de vw ou vh.

O único navegador móvel a ter em conta que não suporta essas unidades é o Opera. http://caniuse.com/#feat=viewport-units

Não concordo com a resposta aceita atualmente. Como sugere o uber5001, a pxé uma unidade fixa e com um espírito semelhante aos esforços do Android específico dp.

Por especificações do material :

Ao escrever CSS, use px sempre que dp ou sp for indicado. O Dp só precisa ser usado no desenvolvimento para Android.

Além disso

Ao projetar para a web, substitua dp por px (para pixel).

Use rem.

É o tamanho da fonte do elemento raiz e uma unidade base muito boa para o tamanho de outros elementos da IU.

Se alguém usasse o mesmo tamanho absoluto (em centímetros), o texto e outros elementos seriam muito grandes no celular ou muito pequenos no desktop.

Se alguém usasse a mesma quantidade de pixels, o texto e outros elementos seriam muito pequenos no celular ou muito grandes no desktop.

A remunidade está no local porque diz "Ei, este é o tamanho que o texto normal deve ter." Basear o tamanho de outros elementos da IU nisso é uma escolha bastante razoável.

Em CSS3, pode ser mais correto dizer que a web não tem Android px. A especificação do CSS3px diz o seguinte:

píxeis; 1px é igual a 1/96 de 1 pol.

px pode ser a medição que você deseja, no futuro.

A partir do CSS3, não há unidades CSS verdadeiramente independentes de dispositivo. Consulte as especificações W3C sobre comprimentos absolutos . Em particular, as unidades absolutas podem não corresponder às suas medidas físicas.

Se as unidades físicas fossem fiéis ao seu propósito, você poderia usar algo como pontos; os pontos estão próximos o suficiente do dps:

1 in = 72 pt
1 in = 160 dp

1 dp = 72 / 160 pt

Se você usa SCSS, pode escrever uma função para retornar em pts:

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

E use-o:

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

Que tal uma interface baseada em unidades rem?

Não tenho experiência suficiente no assunto para confirmar, mas acho que você poderia fazer algumas contas com base no tamanho da janela de visualização para aplicar um tamanho de fonte no elemento raiz e toda a interface se ajustaria de acordo. Essa coisa é um pouco feitiçaria para mim ainda.

Por que não usar pontos, é um tamanho consistente em todos os dispositivos. E é relativo ao tamanho da tela. A maioria não está familiarizada com ele, uma vez que vem da publicação tradicional.

Que tal usar um pouco de mix entre vw (largura da tela para qualquer dispositivo) e em? Aqui, o tamanho da fonte muda dinamicamente, dependendo da largura da tela do dispositivo. Use em seu arquivo CSS principal a próxima regra:

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

(a largura para iPhone 6/7/8 é 375 px, mude para 320 px (iPhone5) e etc)

Em todos os casos, vai funcionar perfeitamente. Existe apenas um menos. Se o seu objetivo for "pixel perfeito", você precisará usar números grandes após o ponto.

Exemplo: sua meta é o tamanho da fonte h5: 18 px em todas as telas.

Então o seu "em" perfeito será:

h5 { 
 font-size: 1.79904em;
 }

sem perfeição usar 18/10:

h5 { 
 font-size: 1.8em;
 }

De acordo com o Google Chrome, você obtém 18,0096px;