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

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

Je n'ai pas assez d'expérience en la matière pour le confirmer, mais je pense que vous pourriez faire des calculs basés sur la taille du viewport pour appliquer une taille de police dans l'élément Root et toute l'interface s'adapterait en conséquence. Ce genre de choses relève encore un peu de la sorcellerie pour moi.

Answer 2

Pourquoi ne pas utiliser des points, la taille est cohérente sur tous les appareils. Et elle est relative à la taille de l'écran. La plupart des gens ne sont pas familiers avec ce système, car il provient de l'édition traditionnelle.

Answer 3

Pourquoi ne pas utiliser un mélange de vw (largeur de l'écran pour tout appareil) et de 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 à 320px (iPhone5) et etc)

Dans tous les cas, il va fonctionner parfaitement. Il n'y a qu'un seul point négatif. Si votre objectif est "pixel parfait", alors vous devez utiliser de grands chiffres après le point.

Exemple : votre objectif est de définir 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 ;