Comment convertir entre Android DP et CSS px?

Je vois que c'est probablement une question noob, mais cela me confond vraiment.

Je lis des documents de Google Material Design, ainsi que certaines de ses implémentations en CSS. La spécification est écrite dans Android dp, tandis que les codes CSS utilisent pxcomme unité de longueur.

Ce qui m'embrouille, c'est que les implémentations css utilisent souvent la valeur exacte de la spécification, par exemple, un toast devrait avoir :

Hauteur du snack-bar à une ligne: 48 dp de hauteur

Largeur minimale: 288 dp

Coin arrondi 2 dp

CSS correspondant :

min-height: 48px;
min-width: 288px;
...
border-radius: 2px;

Dans ma compréhension actuelle, un Android DPest généralement affiché à la taille d'un pixel sur un écran de 160 dpi, tandis que le CSS pxest défini comme un angle visuel. Donc, un pxarrive- t- il à être le même que dplorsque vous voyez à une certaine distance? Si c'est le cas, est-ce un modèle commun à utiliser pxcomme dpdans CSS, ou ai-je mal compris le code CSS?

Je ne connais rien au développement Android avant, et pas un designer. Merci pour toute aide.

Je pense que l'acceptation est fausse. Le px css est en fait un pixel indépendant du périphérique (dip), et il est courant d'utiliser px comme dp dans css.

Je pense que la réponse complète à votre question se trouve ici:

/programming/2025282/difference-between-px-dp-dip-and-sp-in-android

Pour convertir dp en px, vous devez tenir compte des dimensions d'affichage auxquelles vous vous adressez. Plus le DPI est élevé, plus vous devrez entasser de pixels dans la même zone pour lui donner une belle apparence et éviter la pixellisation :

ldpi: 1 dp = 0,75 px
mdpi: 1 dp = 1 px
hdpi: 1 dp = 1,5 px
xhdpi: 1 dp = 2 px
xxhdpi: 1 dp = 3 px
xxxhdpi: 1 dp = 4 px

Par exemple:

Un carré dp 3x3 en CSS ou Photoshop doit être:

2,25x2,25 px - ldpi
3x3 px - mdpi (Samsung ACE, Xperia X8)
6x6 px - xhdpi (Xperia S, Google Nexus 4)
9x9 px - xxhdpi (Samsung S4 - S5, HTC One)
12x12 px - xxxhdpi (cette résolution) sera utilisé sur les appareils de prochaine génération)

Sur la base de ce qui précède, vos calculs devraient ressembler à ceci, en utilisant un multiplicateur 3x dp pour les écrans XXHDPI:

min-height: 144px;
min-width: 864px;
...
border-radius: 6px;

Android réduit automatiquement les images s'il constate que la résolution de l'appareil utilisé est inférieure, vous pouvez donc développer en toute sécurité avec XXHDPI, car il s'adresse à la majorité des appareils haut de gamme d'aujourd'hui sur le marché.

Voici un convertisseur simple pour faire le travail pour vous: http://androidpixels.net/

Le W3C dit :

L'unité px vous protège ainsi de la nécessité de connaître la résolution de l'appareil. Que la sortie soit de 96 dpi, 100 dpi, 220 dpi ou 1800 dpi, une longueur exprimée en nombre entier de px semble toujours bonne et très similaire sur tous les appareils (...)

Et tout cela dit:

Pour avoir une idée de l'apparence d'un px, imaginez un écran d'ordinateur CRT des années 1990: le plus petit point qu'il peut afficher mesure environ 1 / 100e de pouce (0,25 mm) ou un peu plus. L'unité px tire son nom de ces pixels d'écran.

Cela dit aussi:

En fait, CSS exige que 1px soit exactement 1 / 96e de pouce dans toutes les sorties imprimées (...)

Compte tenu du fait que par défaut, les périphériques d'écran sont configurés en 96 dpi, c'est la meilleure hypothèse sur la façon dont les navigateurs interprètent un pixel CSS:

96 css-px = ~ 1 inch

Et nous savons que dans Android:

160 dp = ~ 1 inch

Donc:

96 css-px = ~ 160 dp
css-px-length = round(dp-length * 96 / 160)

Et selon cela:

min-height: 29px;
min-width: 173px;
...
border-radius: 2px; /* 2dp is 1.2px from the formula but it wont work */

Eh bien, je pensais que c'était vrai jusqu'à ce que je vérifie la taille des toasts de Google Polymer :

  min-height: 48px;
  min-width: 288px;
  padding: 16px 24px 12px;
  box-sizing: border-box;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 2px;
  bottom: 12px;
  left: 12px;
  font-size: 14px;

Il s'agit donc d'une conversion de 1 à 1, et à partir de cela, nous avons obtenu que les navigateurs Android utilisent:

1 css-px = 1 dp

Et 96 css-px par pouce est utilisé sur d'autres appareils comme les ordinateurs de bureau et les ordinateurs portables.

Pour conclure: les pixels css sont indépendants du dpi de l'appareil et sur les appareils Android 1 css-px est égal à 1dp.

Il n'y a pas qu'une seule bonne réponse, il y en a en fait deux:

1. Recommandé par Google (par exemple dans le cours Udacity sur la conception de matériaux): utilisez une conversion simple, qui dans de nombreux cas est 1: 1, tout comme dans la bibliothèque Polymer. Par exemple, ce n'est pas bon pour l'affichage de la rétine , alors plutôt que 1: 1, utilisez un rapport de densité fourni dans le tableau des appareils dans le Guide officiel de conception des matériaux ( tableau avec des ratios et des mesures spécifiques pour certains appareils populaires ) et fournissez des requêtes @media appropriées pour seuils de résolution et actifs, en supposant que 1dp est égal à 1px pour un affichage mdpi (160dpi / ppi) .

Remarque: idée générale: en bas de la page: mise à l' échelle de l'image avec une image pour visualiser les ratios pour plusieurs seuils de résolution d'écran (image de point d'arrêt)

2. si vous voulez une cohérence ultime dans votre conception pour des appareils spécifiques , vous devez effectuer des recherches et des calculs supplémentaires, et plus important encore, une pile de requêtes @media afin de prendre en charge autant d'appareils que vous le souhaitez et de fournir une solution de secours (avec le méthode mentionnée en 1ère place) pour ceux qui ne vous intéressent pas tant.

Voici des informations plus détaillées pour ceux qui souhaitent approfondir le sujet, mais c'est une explication et une logique derrière, ce qui précède est une réponse complète :

Le fait est que la "densité de pixels", selon le guide officiel de Material Design (Disposition> Unités et mesures), est:

le nombre de pixels qui tiennent dans un pouce.

Donc, fondamentalement, la densité de pixels est un nouveau nom pour une valeur ppi ou, car beaucoup de gens ne reconnaissent pas cela comme une chose distincte, une valeur dpi.

Définition de 1dp selon le même guide:

Un dp est égal à un pixel physique sur un écran avec une densité de 160 . Pour calculer dp:

dp = (largeur en pixels * 160) / densité d'écran

Lors de l'écriture de CSS, utilisez px partout où dp ou sp est indiqué. Dp doit uniquement être utilisé dans le développement pour Android.

Le principe de base de la conception matérielle est de maintenir des dimensions physiques cohérentes sur différentes plates-formes, ce qui pose le problème de la résolution du bureau, du ppi (/ dpi) et du pixel css, auquel cas vous devriez vous en tenir au calcul du dp comme dans le cas d'Android et il n'est pas vrai que la plupart des écrans sont en 96ppi (c'est une hypothèse qui est importante pour CSS), une grande partie d'entre eux a un ppi un peu plus élevé, et si vous prenez en compte non seulement le bureau traditionnel mais aussi les ordinateurs portables ordinaires , ou les tablettes, ou les "convertibles" comme Surface, il y a un besoin pour la conversion: ils vont généralement de 100 à 130ppi, cela dit que celui que j'utilise en ce moment est 127ppi:

100% = 160ppi -> largeur physique de 1 pixel = 1dp -> rectangle 100x100px = 100x100dp

79% = 127ppi -> largeur physique de 1 pixel = env. 0,8dp -> rectangle 100x100px = 80x80dp

Bien que dp soit une unité pure et nouvelle uniquement pour Android, vous devriez faire quelques calculs afin d'adapter les dispositions MD qui viennent toutes en dp. Si vous voulez avoir une idée plus précise de la taille de l'élément spécifique au sens physique, le plus utile aux fins de la question est la valeur de la plage de taille de contact idéale dans les directives de conception des matériaux pour des appareils spécifiques ** En dessous de la valeur dp, il y a physique. ** La valeur dp change, mais le physique reste le même.

Le problème, pourquoi vous devez calculer les unités, est expliqué plus en détail dans le guide Android API (Conversion des unités dp en unités pixel) et s'applique toujours aux éléments stylisés avec CSS:

Dans certains cas, vous devrez exprimer les dimensions en dp puis les convertir en pixels.

Imaginez une application dans laquelle un geste de défilement ou de lancer est reconnu après que le doigt de l'utilisateur s'est déplacé d'au moins 16 pixels. Sur un écran de base, un utilisateur doit se déplacer de 16 pixels / 160 dpi, ce qui équivaut à 1/10 de pouce (ou 2,5 mm) avant que le geste ne soit reconnu. Sur un appareil doté d'un écran haute densité (240 dpi), l'utilisateur doit se déplacer de 16 pixels / 240 dpi, ce qui équivaut à 1/15 de pouce (ou 1,7 mm). La distance est beaucoup plus courte et l'application apparaît ainsi plus sensible à l'utilisateur.

La conversion Polymère 1: 1 mentionnée précédemment est probablement due au fait que la densité de 96 dpi, ou même celle que j'ai donnée est quelque part en basse densité ou même (comme dans le cas de 96 dpi), même en dessous. Étant donné que la valeur dp n'est pas acceptée par css, il est plus facile de supposer que le rapport de densité (0,75 - pour faible, 1,0 moyen, etc.) est celui qui devrait être utilisé pour la simplification et la taille multiple prise en charge des écrans, qui est indiquée dans le tableau des périphériques pour Material Design mentionné précédemment. Il est même mentionné comme l'une des meilleures pratiques dans le chapitre ci-dessus du guide API Android. Et c'est là que la conversion polymère 1: 1 peut être bonne, car de nombreux appareils ont le rapport de densité au niveau 1.

Revenons au dernier dilemme: le css px, si vous décidez de plonger dans les nuances subtiles de différents appareils. Si vous n'êtes pas si curieux, respectez simplement le rapport de densité du tableau MD. Mais si vous êtes perfectionniste, ce nœud de pixels CSS et de relation entre les dimensions physiques a une explication parfaite (et assez simple) dans une recommandation candidate W3C:

Les unités de longueur absolue sont fixées les unes par rapport aux autres et ancrées à une mesure physique. Ils sont principalement utiles lorsque l'environnement de sortie est connu. Les unités absolues sont constituées des unités physiques ('in', 'cm', 'mm', 'pt', 'pc', 'q') et l'unité d'angle visuel ('px') :

Pour une lecture à bout de bras, 1px correspond donc à environ 0,26 mm (1/96 pouce).

Remarque: Notez que cette définition de l'unité de pixel et des unités physiques diffère des versions précédentes de CSS. En particulier, dans les versions précédentes de CSS, l'unité de pixel et les unités physiques n'étaient pas liées par un rapport fixe: les unités physiques étaient toujours liées à leurs mesures physiques tandis que l'unité de pixel varierait pour correspondre le plus étroitement au pixel de référence. (Cette modification a été apportée car trop de contenu existant repose sur l'hypothèse de 96 dpi, et la rupture de cette hypothèse rompt le contenu.)

Cette nouvelle définition de px (en tenant compte des dimensions physiques) comble l'écart entre les pixels CSS et les dps et nous permet de nous assurer qu'en utilisant de simples calculs de mesure, l' environnement dit de sortie, qui dans ce cas est cohérent (au sens physique) ) La disposition MD reste la même sur différents appareils et plates-formes. De plus, les directives W3C et MD utilisent les images des appareils à basse et haute résolution pour illustrer l'idée de base de la couverture pixel / points - plus de pixels de l'appareil (points) sont nécessaires pour couvrir une zone 1px par 1px sur un appareil haute résolution que sur une résolution basse, ce qui signifie que les largement utilisés dans les requêtes CSS pour l'affichage de la rétine sont en effet la même chose que vous devez fournir (mais avec plus de seuils) pour Material Design et tous les appareils mobiles.

En conclusion, utilisez le rapport de densité MD qui est la meilleure pratique recommandée par Google , ou si vous êtes obsédé par la précision ou que votre conception doit être absolument cohérente sur les tailles physiques: utilisez la conversion précise en utilisant les valeurs ppi / dpi des valeurs spécifiques ou courantes appareils (ce qui est assez fou), ce que vous pouvez facilement tester sur l'outil en ligne Google Resizer car ils respectent les seuils communs suggérés dans le guide MD en premier lieu et les règles de division pour le rapport et les noms de types d'affichage pertinents (xlarge, medium, etc.) ) qui y est mise en œuvre.

Donc, respectez les rapports MD du tableau en vous souvenant que la taille de pixel dp de référence est pour la résolution mdpi (160) et vous serez bon.