it-swarm-pt.tech

O que há de unidades dp (pixels independentes de densidade) com CSS?

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

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

Quando eu testo meu aplicativo em diferentes resoluções e densidades de pixels, ele não parece bom, e às vezes, é muito desproporcional, então nem mesmo é funcional. O CSS não tem unidades de dp como o desenvolvimento nativo do Android, mas eu queria saber o que são algumas alternativas.

De alguma forma, posso obter a densidade de pixels usando Javascript e dimensionar tudo manualmente de forma adequada? Qual é a melhor maneira de criar um aplicativo da Web que pareça e funcione bem em todas as resoluções/densidades?

72
Brad

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

A unidade mais próxima disponível em CSS são as unidades de porcentagem de viewport.

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

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

24
cimmanon

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

Por especificação do material :

Ao escrever CSS, use px onde quer que dp ou sp seja declarado. O DP só precisa ser usado no desenvolvimento para o Android.

Além disso

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

135
Tohuw

No CSS3, pode ser mais preciso dizer que a web não possui o px do Android. A especificação para px do CSS diz o seguinte:

píxeis; 1px é igual a 1/96th de 1in

px pode ser a medida que você deseja, no futuro.

14
uber5001

se rem.

É o tamanho da fonte do elemento raiz e uma unidade base muito boa para o tamanho de outros elementos da interface do usuário.

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 computador.

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

A unidade rem está no local porque diz "Ei, é assim que o texto normal deve ser grande". Basear o tamanho de outros elementos da interface do usuário nisso é uma escolha bastante razoável.

12
Konstantin Schubert

A partir do CSS3, não há unidades CSS que sejam verdadeiramente independentes de dispositivos. Veja o especificação W3C em comprimentos absolutos . Em particular, as unidades absolutas podem não corresponder às suas medições físicas.

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

1 in = 72 pt
1 in = 160 dp

1 dp = 72 / 160 pt

Se você usa o SCSS, você 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);
}
11
Mihai Danila

Que tal uma interface baseada em unidades rem?

Eu não tenho experiência suficiente sobre o assunto para confirmar, mas eu acho que você poderia fazer alguma matemática com base no tamanho da viewport para aplicar um tamanho de fonte no elemento raiz e toda a interface seria ajustada de acordo. Esse material ainda é um pouco de bruxaria para mim.

10
Darlan Alves

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 isso, pois vem da publicação tradicional.

1
Franklin Mayfield