Convertisseur CSS px ↔ rem
Convertir entre les unités CSS px et rem.
px (Pixels)
Une unité absolue qui représente un pixel sur l'écran. A une taille fixe et est limitée pour la conception responsive.
rem (Root EM)
Une unité relative basée sur la taille de police de l'élément racine (html). Bénéfique pour l'accessibilité et la conception responsive.
Formule de Conversion
Recommandations d'Usage
- • Taille de police : rem recommandé
- • Espacement (margin, padding) : rem recommandé
- • Bordure : px utilisable
- • Media queries : rem recommandé
Guide Complet des Unités CSS
Choisir les bonnes unités CSS dans le développement web affecte grandement l'expérience utilisateur et l'accessibilité. Apprenez les différences entre px et rem et comment les utiliser dans les situations appropriées.
📐 Caractéristiques
- • Unité absolue avec correspondance 1:1 aux pixels de l'écran
- • Taille cohérente dans tous les navigateurs
- • Contrôle précis de la mise en page possible
- • Non affecté par les paramètres utilisateur
✅ Cas d'Usage Recommandés
- • Épaisseur des bordures (1px, 2px)
- • Décalage des ombres
- • Tailles d'icônes (16px, 24px)
- • Ajustements fins d'espacement
⚠️ Précautions
- • Ignore les paramètres de taille de police de l'utilisateur
- • Peut causer des problèmes d'accessibilité
- • Limité pour la conception responsive
📐 Caractéristiques
- • Basé sur la taille de police de l'élément racine (html)
- • Reflète les paramètres utilisateur
- • Maintient des proportions cohérentes
- • Adapté à l'accessibilité
✅ Cas d'Usage Recommandés
- • Paramètres de taille de police
- • Espacement (margin, padding)
- • Tailles de conteneurs
- • Points de rupture des media queries
💡 Avantages
- • Maintient les proportions lors du redimensionnement
- • Améliore l'accessibilité
- • Maintenance facile
🎯 Stratégie d'Usage Spécifique aux Unités
Typographie
Utilisez rem pour les tailles de police et l'espacement des lignes rem
Mise en Page
Utilisez rem pour l'espacement et les conteneurs rem
Détails
Utilisez px pour les bordures et les ombres px
📱 Conseils de Conception Responsive
Approche Mobile-First
Définissez la taille de police de base à 16px et redimensionnez avec les unités rem
html { font-size: 16px; }
h1 { font-size: 2rem; /* 32px */ }Usage des Media Queries
Maintenez la cohérence avec des points de rupture basés sur rem
@media (min-width: 48rem) { /* 768px */ }
html { font-size: 18px; }
}♿ Considérations d'Accessibilité
✅ Pratiques Recommandées
- • Définir les tailles de police avec les unités rem
- • Maintenir une taille de police minimale de 16px
- • Espacement de ligne suffisant (1.5 ou plus)
- • Cible tactile minimale de 44px
❌ Choses à Éviter
- • Utiliser des valeurs px fixes pour les tailles de police
- • Texte petit en dessous de 12px
- • Largeurs de conteneur fixes
- • Espacement de ligne de 1.0 ou moins
🔧 Support des Navigateurs et Compatibilité
Unité px
Support parfait dans tous les navigateurs. Disponible depuis IE6+.
Unité rem
Support parfait dans IE9+ et les navigateurs modernes. Solution de repli nécessaire pour IE8 et versions antérieures.
Pour le support IE8 : Déclarez d'abord la valeur px, puis ajoutez la valeur rem comme solution de repli
font-size: 18px; /* IE8 fallback */
font-size: 1.125rem; /* Modern browsers */