Quelles sont les unités dp (pixels indépendants de la densité) avec CSS?

Pour Android, les utilisateurs recommandent d’utiliser des mesures dp (pixels indépendants de la densité) pour les éléments de l’interface utilisateur. Il existe des conventions telles que l’utilisation de 48dp pour une hauteur de bouton, etc.

Je travaille sur une application Web et je reçois beaucoup de critiques sur la conception de l’interface utilisateur en disant qu’elle n’est pas conforme aux normes de conception Android. Evidemment, mon application va avoir un aspect différent car elle utilise du CSS et du HTML au lieu du thème Android Holo, mais je voudrais tout de même le rendre le plus conforme 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 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 sont les alternatives.

Est-ce que je peux en quelque sorte obtenir la densité de pixels en utilisant Javascript et mettre à l’échelle manuellement tout correctement? Quelle est la meilleure façon de créer une application Web qui ressemble et fonctionne parfaitement à toutes les résolutions / densités?

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

L’unité la plus proche disponible en CSS est le 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 au plus grand de vw ou vh.

Opera est le seul navigateur mobile qui ne supporte pas ces unités. http://caniuse.com/#feat=viewport-units

Je ne suis pas d’accord avec la réponse actuellement acceptée. Comme le suggère uber5001, a px est une unité fixe, et dans un esprit similaire aux efforts du dp spécifique à Android.

Par spécification du matériel :

Lorsque vous écrivez CSS, utilisez px partout où dp ou sp est indiqué. Dp doit seulement être utilisé dans le développement pour Android.

En CSS3, il peut être plus précis de dire que le Web n’a pas le px d’Android. La spécification pour le px de CSS3 dit ceci:

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

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

Utilisez rem .

C’est la taille de la police de l’élément racine et 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 gros 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.

L’unité rem est sur place parce qu’elle dit “Hé, c’est comme ça que devrait être le texte normal”. Baser la taille des autres éléments de l’interface utilisateur est un choix plutôt raisonnable.

À partir de CSS3, aucune unité CSS n’est vraiment indépendante du périphérique. Voir les spécifications W3C sur les longueurs absolues . En particulier, les unités absolues peuvent ne pas correspondre à leurs mesures physiques.

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

 1 in = 72 pt 1 in = 160 dp 1 dp = 72 / 160 pt 

Si vous utilisez SCSS, vous pouvez écrire une fonction pour renvoyer dans pts:

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

Et l’utiliser:

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

Qu’en est-il d’une interface basée sur des unités rem?

Je ne suis pas assez expérimenté en la matière pour confirmer, mais je pense que vous pourriez faire des calculs basés sur la taille de la fenêtre d’affichage pour appliquer une taille de police à l’élément racine et que l’interface entière s’ajusterait en conséquence. Ce truc est un peu de sorcellerie pour moi encore.

Pourquoi ne pas utiliser des points, c’est une taille uniforme sur tous les appareils. Et est relatif à la taille de l’écran. La plupart ne le connaissent pas car il provient de l’édition traditionnelle.