Relation entre dp - sp et PX

Je ne demande pas quelle est la différence entre le dp,sp et px.

Je suis en train de concevoir un site web basé sur google nouvelle conception de matériaux, toutes les mesures sont en dp (pour la grille) et sp(pour le texte). Ma question est de savoir comment ils se traduisent par des pixels. J'ai été la conception de sites web depuis plus de 4 ans et de toutes les mesures (grille et police) sont en pixels.

Par Exemple:

  1. Un titre est 24sp, le nombre de pixels n'est-il synonyme d'? (ce n'est pas 24px, j'ai essayé de les mettre en adéquation, c'est autour de 28px mais il y a un standard de systèmes de mesure).
  2. Grille de Directive: "Tous les composants aligner à 8 dp carré grille de ligne de base." - quel est le nombre de pixels n'est-il synonyme d'?

1px = ?dp =?sp sur un ordinateur de bureau ou un quelconque moyen de surveiller ou d'un appareil mobile?

OriginalL'auteur chandan | 2014-07-01

  1. 7

    Je vous recommande la lecture de Google définitions de dp et sp, qui peut être trouvé dans google docs, ici et ici.

    Il y a aussi quelques informations utiles dans le merveilleux Concepteur du Guide de la DPI.

    Le Guide du Designer pour les DPI lien est cassé...
    Merci. Fixe.

    OriginalL'auteur Rob Flaherty

  2. 6

    Je pense que la réponse va être:

    1px = 1dp = 1sp sur tout moyen de moniteur ou de votre appareil mobile.

    Comment ai-je venir avec cette?

    Parce qu'un pixel est un pixel, pour andriod dp et sp sont utilisés parce qu'ils sont utilisés pour des applications natives qui ont, à l'échelle et la résolution de chaque écran est différent en fonction de l'appareil. Pour les ordinateurs de bureau tout cela est la même, le site web doit être compatible/réactif pour les appareils mobiles, mais depuis le site web de charge dans un navigateur, certaines autres médias cahiers (basé sur les lignes directrices) fera le travail.

    Si quelqu'un a une autre conclusion logique, s'il vous plaît partager

    OriginalL'auteur chandan

  3. 3

    D'un coffre-fort à la règle de base est d'utiliser 1 px = 1 dp.

    Cela devrait vous donner un bon coffre-fort de la taille juste au sujet de n'importe quel appareil. Il apparaîtra un peu grand sur certains appareils, notamment l'iPad (régulier).

    Voici pourquoi:

    "Une dp correspond à la taille physique d'un pixel à 160 dpi" (https://developer.android.com/training/multiscreen/screendensities.html#TaskUseD)

    160 dpi signifie:

    160 points = 1 pouce

    Donc:

    160 dp = 1 pouce (25,4 mm)

    Alors, quand Google recommande que les boutons ont un toucher hauteur de la cible de 48 dp, ils disent qu'ils ont besoin d'être de 0,3 pouces (7,6 mm) de hauteur.

    Donc, combien de px est-ce? Eh bien, cela dépend de l'appareil.

    Exemples pour 48 dp (7.6 mm) bouton hauteur:

    • iPad mini: 48 px Pourquoi: L'iPad mini, l'écran est d'environ 120 mm de large et utilise 768 px pour remplir cet espace. Par conséquent, vous devez 162 px de prendre un pouce (25,4 mm), ou 48 px pour votre bouton de la hauteur de 7,6 mm.

    • Kindle Fire (7"): 43 px

    • Kindle Fire (6"): 50 px

    • iPhone: 48 px

    • Nexus 7: 48 px

    • Régulière iPad: 39 px

    (J'ai peut-être truqués de l'arrondi vers le haut/vers le bas un petit peu.. j'aime 48 de mieux que de 49!)

    Écran mm et CSS px de largeur pour des exemples: j'ai calculé la largeur de l'écran à l'aide de la CSS px dimensions de l'écran et de diagonale.

    • iPad mini: 1024 x 768 de résolution et de 201 mm de diagonale = 120 mm de largeur.
    • Kindle Fire 7": 858 x 533 résolution et de 178 mm de diagonale = 94 mm de largeur.
    • Feu Kindle 6": 853 x 533 résolution et de 152 mm de diagonale = 81 mm de largeur.
    • iPhone: 568 x 320 résolution et de 102 mm de diagonale = 50 mm de largeur.
    • Nexus 7: 960 * 600 résolution et de 178 mm de diagonale = 94 mm de largeur.
    • iPad ordinaire: résolution de 1024 x 768 et 246 mm de diagonale = 148 mm de largeur.

    Noter que pour le calcul de la px hauteur du bouton, vous devez utiliser l'appareil CSS px dimensions. Ces chiffres ne sont pas nécessairement les mêmes que les résolutions indiqué dans les specs.

    OriginalL'auteur user984003