Comment écrivez-vous une requête média CSS ?

Connaître la syntaxe des requêtes média de largeur minimale et de largeur maximale

Logo CSS





Site Web adaptatif est une approche de création de pages Web où ces pages peuvent changer dynamiquement leur mise en page et leur apparence en fonction de la taille de l'écran d'un visiteur . Les grands écrans reçoivent une mise en page adaptée à ces écrans plus grands tandis que les appareils plus petits, comme les téléphones mobiles, reçoivent le même site Web formaté d'une manière adaptée à cet écran plus petit. Cette approche offre une meilleure expérience utilisateur pour tous les utilisateurs et peut même aider améliorer le classement des moteurs de recherche . Requêtes média CSS constituent une partie importante de la conception Web réactive.

Les Media Queries sont comme de petites déclarations conditionnelles dans le fichier CSS de votre site Web, vous permettant de définir certaines règles CSS qui ne prendront effet qu'une fois qu'une certaine condition est remplie, comme lorsqu'une taille d'écran est supérieure ou inférieure à certains seuils.



Les Media Queries sont maintenant standard, mais les très anciennes versions d'Internet Explorer ne les prennent pas en charge.

Requêtes multimédias en action

Commencez par un texte bien structuréDocument HTMLlibre de tout style visuel.



Dans votre fichier CSS, stylisez la page et définissez une ligne de base pour l'apparence du site Web. Pour que la taille de la police de la page soit de 16 pixels, écrivez ceci CSS :

|__+_|

Ajouter plus de requêtes multimédias

De plus, vous pouvez ajouter plus de Media Queries pour toutes les tailles plus grandes, en les insérant dans votre feuille de styles comme ceci :

|__+_|

Les premières Media Queries démarrent à 1000 pixels de large, changeant la taille de la police à 20 pixels. Ensuite, une fois que le navigateur était au-dessus de 1400 pixels, la taille de la police reviendrait à 24 pixels. Ajoutez autant de Media Queries que nécessaire pour votre site Web particulier.

Min-Largeur et Max-Largeur

Il existe généralement deux façons d'écrire des Media Queries—en utilisant largeur min ou avec largeur maximale . Jusqu'à présent, nous avons vu min-width en action. Cette approche active Media Queries après qu'un navigateur ait atteint au moins cette largeur minimale. Donc, une requête qui utilise largeur min: 1000px s'applique lorsque le navigateur fait au moins 1000 pixels de large. Ce style de Media Query est utilisé lorsque vous créez un site de manière mobile.



Si tu utilises largeur maximale , cela fonctionne dans le sens inverse. Une requête média de 'max-width: 1000px' s'applique une fois que le navigateur est tombé en dessous de cette taille.