Como converter entre Android DP e CSS px?

Vejo que essa é provavelmente uma pergunta noob, mas realmente me confunde.

Estou lendo documentos do Google Material Design, juntamente com algumas de suas implementações em css. A especificação está escrita no Android dp, enquanto os códigos CSS são usados pxcomo uma unidade de comprimento.

O que me confunde é que as implementações de css geralmente usam o valor exato da especificação, por exemplo, um brinde deve ter :

Altura da barra de lanches de uma linha: 48 dp de altura

Largura mínima: 288 dp

2 dp canto arredondado

CSS correspondente :

min-height: 48px;
min-width: 288px;
...
border-radius: 2px;

No meu entendimento atual, um Android DPgeralmente é exibido no tamanho de um pixel em uma tela de 160 dpi, enquanto o CSS pxé definido como um ângulo visual. Então pxacontece a mesma coisa que dpquando se vê a alguma distância? Em caso afirmativo, esse é um padrão comum para usar pxcomo dpem css, ou eu não entendi completamente o código CSS?

Não sei nada sobre o desenvolvimento do Android antes, e nem um designer. Obrigado por qualquer ajuda.

Eu acho que o aceito está errado. O px css é na verdade pixel independente do dispositivo (dip), e é um padrão comum usar px como dp em css.

Acredito que a resposta completa para sua pergunta possa ser encontrada aqui:

/programming/2025282/difference-between-px-dp-dip-and-sp-in-android

Para converter dp em px, é necessário levar em consideração as dimensões de exibição às quais você está endereçando. Quanto maior o DPI, mais pixels você terá que acumular na mesma área para torná-la boa e evitar pixelização :

ldpi: 1 dp = 0,75 px
mdpi: 1 dp = 1 px
hdpi: 1 dp = 1,5 px
xhdpi: 1 dp = 2 px
xxhdpi: 1 dp = 3 px
xxxhdpi: 1 dp = 4 px

Por exemplo:

Um quadrado de 3x3 dp em CSS ou Photoshop precisa ser:

2.25x2.25 px - ldpi
3x3 px - mdpi (Samsung ACE, Xperia X8)
6x6 px - xhdpi (Xperia S, Google Nexus 4)
9x9 px - xxhdpi (Samsung S4 - S5, HTC One)
12x12 px - xxxhdpi (esta resolução será usado em dispositivos de próxima geração)

Com base no exposto acima, seus cálculos devem ficar assim, usando um multiplicador de 3x dp para telas XXHDPI:

min-height: 144px;
min-width: 864px;
...
border-radius: 6px;

O Android reduz automaticamente as imagens se detectar que a resolução do dispositivo usado é mais baixa, portanto você pode desenvolver com segurança o XXHDPI, pois ele aborda a maioria dos dispositivos high-end atuais do mercado.

Aqui está um conversor simples para fazer o trabalho para você: http://androidpixels.net/

O W3C diz :

A unidade px, portanto, evita que você precise saber a resolução do dispositivo. Seja a saída de 96 dpi, 100 dpi, 220 dpi ou 1800 dpi, um comprimento expresso como um número inteiro de px sempre parece bom e muito semelhante em todos os dispositivos (...)

E apesar de dizer:

Para ter uma idéia da aparência de um px, imagine um monitor de computador CRT da década de 1990: o menor ponto que ele pode exibir mede cerca de 1/100 de polegada (0,25 mm) ou um pouco mais. A unidade de px recebeu o nome desses pixels da tela.

Também diz:

De fato, o CSS exige que 1px seja exatamente 1/96 de polegada em todas as impressões (...)

Considerando que, por padrão, os dispositivos de tela são configurados como 96 dpi, é a melhor suposição sobre como os navegadores interpretam um pixel CSS:

96 css-px = ~ 1 inch

E sabemos que no Android:

160 dp = ~ 1 inch

Então:

96 css-px = ~ 160 dp
css-px-length = round(dp-length * 96 / 160)

E de acordo com isso:

min-height: 29px;
min-width: 173px;
...
border-radius: 2px; /* 2dp is 1.2px from the formula but it wont work */

Bem, pensei que estava certo até verificar os tamanhos de brinde do Google Polymer :

  min-height: 48px;
  min-width: 288px;
  padding: 16px 24px 12px;
  box-sizing: border-box;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 2px;
  bottom: 12px;
  left: 12px;
  font-size: 14px;

Portanto, é uma conversão de 1 para 1 e, a partir disso, os navegadores Android usam:

1 css-px = 1 dp

E 96 css-px por polegada são usados ​​em outros dispositivos, como desktops e laptops.

Para concluir: os pixels css são independentes do dpi do dispositivo e nos dispositivos Android 1 css-px é igual a 1dp.

Não existe uma resposta certa, na verdade existem duas:

1. Recomendado pelo Google (por exemplo, no curso Udacity sobre Design de materiais): use uma conversão simples, que em muitos casos é 1: 1, como na biblioteca Polymer. Não é adequado para a exibição da retina, por exemplo, em vez de 1: 1, use uma taxa de densidade fornecida na tabela de dispositivos no Guia de design de materiais oficial ( tabela com proporções e métricas específicas para alguns dispositivos populares ) e forneça consultas @media adequadas para limites e ativos de resolução , supondo que 1dp seja igual a 1px para uma exibição de mdpi (160dpi / ppi) .

Nota: idéia geral: na parte inferior da página: Escala de imagem com alguma imagem para visualizar as proporções para vários limites de resolução de tela (imagem do ponto de interrupção)

2. se você deseja uma ultra consistência em seu design para dispositivos específicos , é necessário fazer mais pesquisas e cálculos, e o mais importante é ter uma pilha de mais consultas @media para oferecer suporte a quantos dispositivos você desejar e fornecer fallback (com o método mencionado em 1º lugar) para os que você não se importa tanto.

Aqui estão informações mais detalhadas para aqueles que desejam mergulhar mais no tópico, mas há uma explicação e lógica por trás, a resposta acima é uma resposta completa :

A questão é que a "densidade de pixels", de acordo com o guia oficial do Material Design (Layout> Unidades e medidas), é:

o número de pixels que cabem em uma polegada.

Então, basicamente, densidade de pixels é um novo nome para um valor de ppi ou, como muitas pessoas não reconhecem isso como algo separado, um valor de dpi.

Definição de 1dp de acordo com o mesmo guia:

Um dp é igual a um pixel físico em uma tela com uma densidade de 160 . Para calcular dp:

dp = (largura em pixels * 160) / densidade da tela

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

O principal princípio do design de materiais é manter dimensões físicas consistentes em diferentes plataformas, o que levanta a questão da resolução da área de trabalho, ppi (/ dpi) e pixel css. Nesse caso, você deve calcular o dp exatamente como no Android dispositivos, e não é verdade que a maioria das telas tem 96ppi (é uma suposição importante para CSS), boa parte deles tem um ppi um pouco maior, e se você levar em conta não apenas a área de trabalho tradicional, mas também os laptops comuns , ou os tablets ou os "conversíveis", como o Surface, é necessário a conversão: eles geralmente variam de 100 a 130ppi, que disseram que o que estou usando no momento é 127ppi:

100% = 160ppi -> largura física de 1 pixel = 1dp -> retângulo 100x100px = 100x100dp

79% = 127ppi -> largura física de 1 pixel = ca. 0,8dp -> retângulo 100x100px = 80x80dp

Embora o dp seja uma unidade pura e nova apenas para Android, você deve fazer alguns cálculos para adaptar os layouts do MD, todos fornecidos no dp. Se você quiser ter mais alguma ideia de quão grande será o elemento específico no sentido físico, o mais útil para os fins da pergunta é o valor ideal do intervalo de tamanho de toque nas diretrizes de design de materiais para dispositivos específicos ** Abaixo do valor dp existe um físico. ** O valor dp muda, mas o físico permanece o mesmo.

O problema, por que você precisa calcular unidades, é explicado em mais detalhes no guia da API do Android (Convertendo unidades de dp em unidades de pixel) e ainda se aplica a elementos denominados em CSS:

Em alguns casos, você precisará expressar dimensões em dp e depois convertê-las em pixels.

Imagine um aplicativo no qual um gesto de rolagem ou arremesso é reconhecido após o dedo do usuário se mover pelo menos 16 pixels. Na tela de linha de base, o usuário deve mover-se 16 pixels / 160 dpi, o que equivale a 1/10 de polegada (ou 2,5 mm) antes que o gesto seja reconhecido. Em um dispositivo com uma tela de alta densidade (240 dpi), o usuário deve se mover em 16 pixels / 240 dpi, o que equivale a 1/15 de polegada (ou 1,7 mm). A distância é muito menor e, portanto, o aplicativo parece mais sensível ao usuário.

A conversão de polímero 1: 1 mencionada anteriormente provavelmente se deve ao fato de que a densidade de 96dpi, ou mesmo a que eu dei, está em algum lugar de baixa densidade ou mesmo (como no caso de 96dpi), mesmo abaixo dela. Considerando que o valor dp não é um css aceito, é mais fácil supor que a taxa de densidade (0,75 - para baixa, 1,0 média e assim por diante) é a que deve ser usada para simplificação e tamanho múltiplo suporte de telas, que é mostrado na tabela de dispositivos do Material Design mencionado anteriormente. É mencionada até como uma das melhores práticas citadas no capítulo acima do guia da API do Android. E é aí que a conversão de polímero 1: 1 pode ser boa, pois muitos dispositivos têm a taxa de densidade no nível 1.

Voltando ao último dilema: o css px, se você decidir mergulhar em nuances sutis de diferentes dispositivos. Se você não é tão questionador, fique com a proporção de densidade da tabela MD. Mas se você é um perfeccionista, essa relação crucial de pixels CSS e dimensões físicas tem uma explicação perfeita (e bastante simples) em uma recomendação de candidato do W3C:

As unidades de comprimento absoluto são fixadas uma em relação à outra e ancoradas a alguma medida física. Eles são úteis principalmente quando o ambiente de saída é conhecido. As unidades absolutas consistem nas unidades físicas ('in', 'cm', 'mm', 'pt', 'pc', 'q') e na unidade de ângulo visual ('px') :

Para leitura no comprimento do braço, 1px corresponde a cerca de 0,26 mm (1/96 pol.).

Nota: Observe que esta definição da unidade de pixel e das unidades físicas difere das versões anteriores do CSS. Em particular, nas versões anteriores do CSS, a unidade de pixel e as unidades físicas não estavam relacionadas por uma proporção fixa: as unidades físicas estavam sempre ligadas às suas medidas físicas, enquanto a unidade de pixel variava para corresponder mais ao pixel de referência. (Essa alteração foi feita porque o conteúdo existente em excesso depende da suposição de 96dpi e a quebra dessa suposição quebra o conteúdo.)

Essa nova definição de px (levando em consideração as dimensões físicas) preenche a lacuna entre pixels CSS e dps e permite garantir que, usando cálculos simples de medição, o chamado ambiente de saída, que neste caso seja consistente (no sentido físico) ) Layout do MD , permanece o mesmo em diferentes dispositivos e plataformas. Além disso, as Diretrizes W3C e MD usam as imagens de dispositivos de baixa e alta resolução para ilustrar a idéia principal da cobertura de pixels / pontos - são necessários mais pixels (pontos) para cobrir uma área de 1 x 1 por 1 em um dispositivo de alta resolução. em baixa resolução, o que significa que as amplamente usadas em consultas CSS para exibição de retina são de fato a mesma coisa que você deve fornecer (mas com mais limites) para o Material Design e todos os dispositivos móveis.

Concluindo, use a taxa de densidade de MD, que é a melhor prática recomendada pelo Google , ou se você precisa de precisão ou se seu design precisa ser absolutamente consistente com tamanhos físicos: use a conversão precisa usando valores de ppi / dpi específicos ou comuns dispositivos (o que é bastante insano), o que você pode facilmente testar na ferramenta on-line do redimensionador do Google, pois eles respeitam os limites comuns sugeridos no MD Guide em primeiro lugar e as regras de divisão para a proporção e nomes de tipos de exibição relevantes (xlarge, médio e assim por diante) ) implementado nele.

Portanto, atenha-se às taxas de MD da tabela, lembrando que o tamanho de pixel igual ao dp de referência é para a resolução mdpi (160) e você será bom.