Que sont les unités dp (density independent pixels) avec CSS ?

Question

Pour Android, les gens recommandent d'utiliser les mesures dp (density independent pixels) pour les éléments de l'interface utilisateur, et il existe des conventions telles que l'utilisation des mesures dp pour les éléments de l'interface utilisateur. 48dp pour la hauteur d'un bouton, etc.

Je travaille sur une application web et je reçois de nombreuses critiques sur la conception de l'interface utilisateur, qui n'est pas conforme aux normes de conception d'Android. Il est évident que mon application aura un aspect différent puisqu'elle utilise les CSS et le HTML au lieu du thème Holo d'Android, mais j'aimerais quand même la rendre aussi conforme que possible. Cependant, le CSS ne permet pas de mesures indépendantes de la densité.

Lorsque je teste mon application sur différentes résolutions et densités de pixels, elle n'a pas l'air bien, et parfois, elle est très disproportionnée et n'est même pas fonctionnelle. CSS n'a pas d'unités dp comme le développement natif d'Android, mais je me demandais quelles étaient les alternatives.

Puis-je obtenir la densité de pixels en utilisant Javascript et mettre manuellement tout à l'échelle ? Quelle est la meilleure façon de créer une application Web qui fonctionne bien sur toutes les résolutions/densités ?

Answer 1

Je ne suis pas d'accord avec la réponse actuellement acceptée. Comme le suggère uber5001, un px est une unité fixe, et dans un esprit similaire aux efforts de l'initiative Android-specifc dp .

Par Spécifications du matériau :

Lors de l'écriture de CSS, utilisez px partout où dp ou sp est indiqué. Dp ne doit être utilisé que lors du développement pour Android.

En outre,

Lors de la conception pour le web, remplacez dp par px (pour pixel).

Answer 2

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

L'unité la plus proche disponible en CSS est l'unité de pourcentage de la fenêtre d'affichage.

• vw - Égal à 1 % de la largeur du bloc contenant initial.
• vh - Égal à 1 % de la hauteur du bloc contenant initial.
• vmin - égal au plus petit de vw ou vh.
• vmax - égal à la plus grande des deux valeurs vw ou vh.

Le seul navigateur mobile à connaître qui ne prend pas en charge ces unités est Opera. http://caniuse.com/#feat=viewport-units

Answer 3

Utilisez rem .

Il s'agit de la taille de la police de l'élément racine et d'une très bonne unité de base pour la taille des autres éléments de l'interface utilisateur.

Si l'on utilisait la même taille absolue (en centimètres), le texte et les autres éléments seraient beaucoup trop grands sur le mobile ou beaucoup trop petits sur le bureau.

Si l'on utilisait la même quantité de pixels, le texte et les autres éléments seraient beaucoup trop petits sur le mobile ou beaucoup trop grands sur le bureau.

Le site rem est sur la sellette parce qu'elle dit "Hé, voici la taille que devrait avoir un texte normal". Baser la taille des autres éléments de l'interface utilisateur sur ce principe est un choix plutôt raisonnable.

Answer 4

En CSS3, il serait peut-être plus juste de dire que le web n'a pas l'équivalent d'Android. px . La spécification de l'élément CSS3 px dit ceci :

pixels ; 1px est égal à 1/96e de 1in

px pourrait être la mesure que vous voulez, dans le futur.

Answer 5

À partir de CSS3, il n'existe pas d'unités CSS véritablement indépendantes du périphérique. Voir la Spécification du W3C sur les longueurs absolues . En particulier, les unités absolues peuvent ne pas correspondre à leurs mesures physiques. Extrait de la spécification :

Remarque : si l'unité d'ancrage est l'unité pixel, les unités physiques peuvent ne pas correspondre à leurs mesures physiques. De même, si l'unité d'ancrage est une unité physique, l'unité de pixel peut ne pas correspondre à un nombre entier de pixels du dispositif.

Note : Cette définition de l'unité de pixel et des unités physiques diffère des versions précédentes de CSS. En particulier, dans les versions précédentes de CSS, l'unité de pixel et les unités physiques n'étaient pas liées par un rapport fixe : les unités physiques étaient toujours liées à leurs mesures physiques tandis que l'unité de pixel variait pour correspondre le plus étroitement possible au pixel de référence. (Cette modification a été apportée parce qu'une trop grande partie du contenu existant repose sur l'hypothèse de 96dpi, et que la rupture de cette hypothèse brisait le contenu).

Si les unités physiques étaient fidèles à leur objectif, vous pourriez utiliser quelque chose comme des points ; les points sont suffisamment proches des dps :

1 in = 72 pt
1 in = 160 dp

1 dp = 72 / 160 pt

Si vous utilisez SCSS, vous pouvez écrire une fonction à retourner en pts :

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

Et utilisez-la :

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