Qu'est-ce que les unités dp (pixels indépendants de la densité) avec CSS?

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

Je travaille sur une application Web et je reçois beaucoup de critiques sur la conception de l'interface utilisateur, disant qu'elle n'est pas conforme aux normes de conception Android. Évidemment, mon application aura un aspect différent car elle utilise CSS et HTML au lieu du thème Android Holo, mais j'aimerais toujours la rendre conforme autant que possible. Cependant, CSS n'autorise pas les 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, donc elle n'est même pas fonctionnelle. CSS n'a pas d'unités dp comme le développement natif Android, mais je me demandais quelles sont certaines alternatives.

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

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

L'unité la plus proche disponible dans CSS sont les unités de pourcentage de la fenêtre.

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

Le seul navigateur mobile qui ne prend pas en charge ces unités est Opera. 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 pxest une unité fixe, et dans un esprit similaire aux efforts de l'Android-specifc dp.

Par spécification du matériau :

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

aditionellement

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

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 mobile ou beaucoup trop petits sur bureau.

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

L' remunité est sur place car elle dit "Hé, voici la taille du texte normal." Baser la taille des autres éléments de l'interface utilisateur sur ce point est un choix assez raisonnable.

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

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

px pourrait être la mesure que vous souhaitez, à l'avenir.

À partir de CSS3, aucune unité CSS n'est vraiment indépendante du périphérique. Voir les spécifications du 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 objectif, vous pourriez utiliser quelque chose comme des points; les points sont suffisamment proches de dps:

1 in = 72 pt
1 in = 160 dp

1 dp = 72 / 160 pt

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

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

Et utilisez-le:

.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 en fonction de la taille de la fenêtre pour appliquer une taille de police dans l'élément racine et toute l'interface s'ajusterait en conséquence. Ce truc est encore un peu sorcier pour moi.

Pourquoi ne pas utiliser des points, c'est une taille cohérente 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.

Qu'en est-il d'utiliser un mélange entre vw (largeur d'écran pour n'importe quel appareil) et em? Ici, la taille de la police change dynamiquement, en fonction de la largeur de l'écran de votre appareil. Utilisez la règle suivante dans votre fichier CSS principal:

font-size: calc(100vw * 10 / 375);

(la largeur pour l'iPhone 6/7/8 est de 375px, changez-la en 320px (iPhone5) et etc.)

Dans tous les cas, cela fonctionne parfaitement. Il n'y a qu'un seul moins. Si votre objectif est "pixel parfait", vous devez utiliser de grands nombres après le point.

Exemple: votre objectif est la taille de la police h5: 18px sur tous les écrans.

Alors votre "em" parfait sera:

h5 { 
 font-size: 1.79904em;
 }

sans perfection utiliser 18/10:

h5 { 
 font-size: 1.8em;
 }

Selon Google Chrome, vous obtenez 18,0096px;