web-dev-qa-db-fra.com

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

Pour Android, on recommande d'utiliser des mesures en dp (pixels indépendants de la densité) pour les éléments d'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 de nombreuses critiques sur la conception de l'interface utilisateur, affirmant qu'elle n'était pas conforme aux normes de conception Android. De toute évidence, mon application aura un aspect différent, car elle utilise CSS et HTML au lieu du thème Android Holo, mais j'aimerais quand même la rendre la plus conforme possible. Cependant, CSS ne permet pas les mesures indépendantes de la densité.

Lorsque je teste mon application sur différentes résolutions et densités de pixels, le résultat n'est pas satisfaisant. Parfois, il est hors de proportion, il n'est même pas fonctionnel. CSS n'a pas d'unités dp comme Android le développement natif en a, mais je me demandais quelles sont certaines alternatives.

Puis-je en quelque sorte obtenir la densité de pixels en utilisant Javascript et tout redimensionner manuellement de manière appropriée? Quel est le meilleur moyen de créer une application Web qui ressemble et fonctionne bien sur toutes les résolutions/densités?

androidcssweb-applicationsuser-interfacescreen
76
Brad

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

L'unité disponible la plus proche en CSS est l'unité de visualisation en pourcentage.

  • 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 de vw ou vh.

Le seul navigateur mobile dont on sait qu'il ne prend pas en charge ces unités est Opera. http://caniuse.com/#feat=viewport-units

23
cimmanon

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 s'inscrit dans le même esprit que les efforts du dp spécifique à Android.

Per spécification du matéria :

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

Aditionellement

Lorsque vous concevez pour le Web, remplacez dp par px (pixel).

143
Tohuw

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

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

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

14
uber5001

tilisez 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 grands sur un mobile ou beaucoup trop petits sur un ordinateur de bureau.

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

L'unité rem est sur place car elle indique "Hé, voici la taille du texte normal". Baser la taille des autres éléments de l'interface utilisateur sur cette option est un choix plutôt raisonnable.

13
Konstantin Schubert

Depuis CSS3, aucune unité CSS n'est vraiment indépendante du périphérique. Voir le spécification 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 assez 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);
}
11
Mihai Danila

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 quelques calculs en fonction de la taille de la fenêtre d'affichage pour appliquer une taille de police dans l'élément racine et l'ensemble de l'interface s'ajusterait en conséquence. Ce truc est un peu de sorcellerie pour moi pour le moment.

10
Darlan Alves

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

1
Franklin Mayfield