Qu'est-ce que le ratio de pixels de l'appareil ?

Le DPR est le rapport entre les pixels physiques et les pixels CSS. Un DPR de 2 (Retina) signifie que chaque pixel CSS est rendu par 4 pixels physiques.

Pourquoi ma résolution diffère-t-elle des specs de mon écran ?

La taille de la fenêtre du navigateur ≠ la résolution de l'écran. La fenêtre est généralement plus petite que l'écran, et la mise à l'échelle DPR signifie que les pixels CSS diffèrent des pixels physiques.

Que sont les breakpoints Tailwind ?

sm : 640px, md : 768px, lg : 1024px, xl : 1280px, 2xl : 1536px. Votre mise en page change à ces largeurs dans le design responsive Tailwind CSS.

Outil Développeur

Testeur de résolution d'écran

Voyez la taille actuelle de votre fenêtre de navigateur, la résolution de l'écran, le ratio de pixels de l'appareil et quel breakpoint Tailwind est actif. Mise à jour en temps réel au redimensionnement.

100% gratuit — aucun compte requis

0 x 0

Taille de la fenêtre

Résolution de l'écran

0 x 0

Ratio de pixels de l'appareil

Orientation

Paysage

Breakpoint Tailwind

xs0-639

sm640-767

md768-1023

lg1024-1279

xl1280-1535

2xl1536+

Correspondances d'appareils

iPhone SE

375 x 667

iPhone 15

393 x 852

iPad

810 x 1080

MacBook Air

1440 x 900

1080p

1920 x 1080

1440p

2560 x 1440

3840 x 2160

Connaissez votre écran

Métriques en temps réel du navigateur et de l'écran

Mises à jour en direct

Toutes les valeurs se mettent à jour instantanément quand vous redimensionnez votre fenêtre de navigateur.

Correspondance d'appareils

Voyez quels appareils courants correspondent à la taille actuelle de votre fenêtre.

Breakpoints Tailwind

Sachez quel breakpoint Tailwind CSS (sm/md/lg/xl/2xl) est actuellement actif.

Ratio de pixels

Voyez le ratio de pixels de votre appareil — important pour les écrans Retina/haute résolution.

FAQ

Outils Développeur

Créez du contenu responsive

Testez vos designs responsive sur tous les appareils.