Outils de design

Testeur de point d'arrêt réactif — Points d'arrêt du framework en direct

Découvrez quel point d'arrêt du framework CSS correspond à la largeur actuelle de la fenêtre en temps réel. Les préréglages couvrent Tailwind CSS, Bootstrap et Material UI, ainsi qu'une liste personnalisée pour le débogage réactif.

AdaptatifPoint d'arrêtConception

Ajouter cet outil aux favoris

Aucun mode de stockage des favoris n’a été sélectionné.

Actions rapides

Copiez l’URL de cet outil ou ouvrez la feuille de partage du système sur un appareil compatible.

Cas d’usage

  • Confirmer le point d'arrêt réactif actif
  • Comparez les points d'arrêt prédéfinis entre les frameworks
  • Référencez les points d'arrêt lors de la création de mises en page

Mode d’emploi

  1. Choisissez un paramètre prédéfini de framework CSS
  2. Redimensionnez la fenêtre du navigateur
  3. Lisez le point d'arrêt actuel et la liste

Exemples d’entrée et de sortie

Largeur de la fenêtre

768px

Tailwind

Point d’arrêt md

FAQ

Quels frameworks sont pris en charge ?

Les préréglages incluent Tailwind CSS, Bootstrap 5, Material UI et une liste de points d'arrêt personnalisée.

Outils

Outils associés

Poursuivez avec un autre outil traduit pour une tâche proche.

Règle de pixels

Règle de pixels — Taille de l'écran et graduations

Disponible

Dessinez une règle de pixels horizontale ou verticale sur la page. Ajustez la longueur et l'espacement des graduations, et affichez la taille de la fenêtre ainsi que le rapport en pixels de l'appareil pour vérifier les mesures de pixels CSS par rapport aux mises en page et aux maquettes.

Pixels Règle Mesurer

Convertisseur d'unités CSS

Convertisseur d'unités CSS — px, rem, em, vw

Disponible

Convertissez entre px, rem, em, pt, vw, vh et %. Personnalisez la taille de la police racine, la taille de la police parent et la taille de la fenêtre d'affichage pour un travail réactif et un transfert de la conception au code.

CSS Unités Conversion