Générateur de requêtes média de la fenêtre d'affichage
Générez des requêtes média CSS pour la conception web réactive.
Paramètres de la requête média
Configurez les conditions de la requête média
Condition 1
Préréglages
Choisissez les modèles de requêtes média couramment utilisés
CSS généré
@media screen and (max-width: 768px) {
/* Your CSS rules here */
}Points d'arrêt courants
Mobile :
max-width: 480pxTablette :
481px - 768pxOrdinateur de bureau :
min-width: 1024pxGrand ordinateur de bureau :
min-width: 1200pxGuide des requêtes média
Caractéristiques clés des médias
- • width/height : Largeur/hauteur de la fenêtre d'affichage
- • min-width/max-width : Conditions de largeur minimale/maximale
- • orientation : Orientation de l'écran (portrait/paysage)
- • resolution : Résolution de l'écran (écrans rétine, etc.)
- • hover : Prise en charge de la capacité de survol
- • pointer : Précision du pointeur (tactile/souris)
Conseils d'utilisation
- • Approche Mobile First : Utilisez min-width pour concevoir à partir de petits écrans
- • Combinez des conditions complexes avec des opérateurs logiques
- • Utilisez le type de média print pour des styles d'impression séparés
- • Utilisez la résolution pour la prise en charge des écrans haute résolution