Règle en pixels

Qu’est-ce qu’un pixel CSS ?

Un pixel CSS est l’unité abstraite du navigateur — le px de votre feuille de style. Il n’est délibérément pas une taille physique : sur un écran standard, un pixel CSS correspond à un pixel physique, tandis que sur un écran haute densité (« Retina »), plusieurs pixels physiques s’associent pour dessiner un seul pixel CSS plus nettement. Le rapport est le rapport de pixels de l’appareil (DPR). Le web design se fait en pixels CSS, et c’est exactement ce que compte cette règle.

Lire l’échelle des px

En mode px, les petits traits arrivent tous les 10 px, les traits moyens tous les 50 px, et les marques numérotées tous les 100 px. Pour mesurer un bouton : alignez son bord gauche avec le zéro et lisez où tombe le bord droit — disons, juste après 120, soit environ 124 px de large. Pour un travail exact, placez des repères aux deux bords et soustrayez leurs indications.

Pourquoi le mode px n’a besoin d’aucun étalonnage

L’étalonnage répond à une question physique : « combien de pixels CSS valent un pouce réel sur cet écran ? » Le mode pixels ne pose jamais cette question — il compte simplement les propres unités du navigateur, que la page connaît exactement. C’est aussi pourquoi les mesures en px n’ont aucun sens comme tailles physiques : 100 px valent un nombre différent de millimètres sur chaque écran. Utilisez les px pour le design, et les cm/mm/pouces (après étalonnage) pour le monde physique.

Pixels et points d’impression

Vous verrez parfois « 1 px = 1/96 de pouce ». C’est une convention d’impression issue du CSS, utilisée pour que les feuilles de style puissent convertir en unités physiques sur papier — elle ne dit rien de votre écran. À l’écran, la seule affirmation honnête est : un pixel CSS est aussi grand que la densité de l’écran le rend, et la règle étalonnée est la façon de le savoir.

Repères pratiques en pixels

• Texte courant typique (16 px), hauteur de capitale — environ 11 px
• Hauteur de bouton courante — 36–48 px
• Favicon — 16 × 16 px
• Largeur de fenêtre Full HD — 1920 px (px CSS, quel que soit le DPR)

Foire aux questions

Quelle est la taille d’un pixel dans la vraie vie ?

Il n’y a pas de réponse fixe. Un pixel CSS n’a pas de taille physique — il ne vaut 1/96ᵉ de pouce que par convention pour l’impression. Sur votre écran, sa taille physique dépend de la densité de l’écran : c’est exactement pourquoi la règle a besoin d’un étalonnage pour les unités physiques, mais pas pour le mode pixels.

La règle en pixels a-t-elle besoin d’un étalonnage ?

Non. Le mode pixels compte les propres pixels CSS du navigateur, que la page connaît exactement sans aucune mesure physique. L’étalonnage ne compte que pour les cm, mm et pouces — les unités qui ont des tailles réelles.

Qu’est-ce que le rapport de pixels de l’appareil (DPR) ?

Le nombre de pixels physiques d’écran utilisés pour dessiner un pixel CSS. Un DPR de 2 (un écran Retina) entasse quatre pixels physiques dans chaque pixel CSS pour un rendu plus net. Le mode pixels de la règle affiche toujours des pixels CSS, ceux avec lesquels travaillent les web designers.