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

91

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?

Brad
fonte
2
CSS pxé igual ao dpdo Android. De acordo com as especificações CSS3. em unidades e valores .
omninonsense

Respostas:

24

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

Cimmanon
fonte
Essas unidades são exibidas corretamente durante a implantação no iOS?
jmhostalet
@jmhostalet Não, faz com que o navegador entre em uma espécie de loop infinito, pois a altura da janela de visualização é dinâmica.
rookie1024
6
esta resposta está incorreta, porque a pxunidade em css é (contra-intuitivamente) já independente da densidade de pixel - "um pixel css é um não um pixel", há muitos artigos sobre isso
ChaseMoskal
181

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

Tohuw
fonte
25
Esta é a resposta. 1 para citar as especificações do material.
Qix - MONICA ERA MISTURADA
2
Do MDN: "A unidade em não representa uma polegada física na tela, mas representa 96 px. Isso significa que qualquer que seja a densidade de pixels da tela real, presume-se que seja 96 dpi. Em dispositivos com densidade de pixels maior, 1 polegada será menor que 1 polegada física. Da mesma forma, mm, cm e pt não são comprimento absoluto. " developer.mozilla.org/en/docs/Web/CSS/…
Maciej Krawczyk
1
A polegada CSS e a polegada física são 2 coisas diferentes. 1 polegada CSS é sempre 96px, independentemente da densidade da tela. Portanto, apenas em um monitor de 96 dpi a polegada CSS e a polegada física podem ser consideradas iguais.
Maciej Krawczyk
1
@MaciejKrawczyk Eu entendo a base de sua controvérsia sobre a disparidade de escala em px. Eu poderia argumentar sobre como um px é de fato uma unidade fixa, e a escala que você envolve não muda essa verdade básica, mas isso é uma pista falsa. A realidade é que a especificação do material afirma diretamente para usar px sempre que dp for sugerido. Dado que Brad perguntou sobre os padrões de design do Android, eu forneci a resposta canônica e, portanto, correta.
Tohuw
2
A atualização recente (maio de 2018) para material design explica Pixel Density em mais profundidade material.io/design/layout/#pixel-density
Squiggle
18

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.

Konstantin Schubert
fonte
16

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.

uber5001
fonte
2
Não consigo ver como essa transição vai acontecer sem quebrar tudo. E usar o mesmo tamanho absoluto (em cm) para, digamos, texto em dispositivos móveis e desktops não é um bom paradigma.
Konstantin Schubert,
E 1in é definido como 96px. As unidades CSS como em, mm dependem da densidade do pixel.
Maciej Krawczyk
yo siempre use px en vez de dp y va bien
Ivan Paredes
Mente estourada: OOOO
dwjohnston
12

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);
}
Mihai Danila
fonte
10

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.

Darlan Alves
fonte
Você não precisa definir o tamanho da fonte. O tamanho da fonte padrão do elemento raiz é geralmente uma escolha bastante razoável para o dispositivo em questão.
Konstantin Schubert,
1

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.

Franklin Mayfield
fonte
0

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;

Yuriy Ivanochko
fonte