Il n'y a pas qu'une seule bonne réponse, il y en a en fait deux:
- 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)
- 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.
em/rem
s partout, puis simplement mettre à l'échelle la taille de police de base pour chaque résolution.