Cet article mentionnera les directives nécessaires à la mise en œuvre des requêtes multimédias.

Comment implémenter des requêtes multimédias pour les appareils mobiles ?

La requête média peut être appliquée aux appareils mobiles en mentionnant simplement le « @médias ' et en précisant la taille de l'écran entre les petites accolades. Le CSS de cette requête multimédia peut ensuite être ajouté entre les accolades. Chaque fois que la taille de l'écran correspond à la taille spécifiée par l'utilisateur, la requête multimédia indiquée sera appliquée.

Passons en revue un exemple pratique pour apprendre la mise en œuvre des requêtes multimédias pour les appareils mobiles.

Exemple : créer une mise en page qui passe d'une disposition à deux colonnes à une disposition à une colonne en appliquant des requêtes multimédias

Dans l'exemple ci-dessous, la disposition de la page Web passera d'une disposition en colonnes à une disposition en une seule colonne :

Étape 1 : Créer une structure HTML

• Tout d'abord, créez un fichier HTML et liez le fichier de feuille de style CSS externe dans son section.
• Ensuite, créez un section et ajoutez le titre du site Web à l’aide de la

  étiqueter.

• Créer un
  par le nom de classe « container-class » et deux autres

  à l'intérieur portent le nom de classe « colonne ».

Étape 2 : Appliquer CSS
Sur la partie du corps :

• Tout d’abord, précisez la section du corps en écrivant le « corps ' tag et mentionnant les accolades.
• À l’intérieur des accolades, spécifiez la famille de polices, la couleur d’arrière-plan, la marge et le remplissage.

Sur le section:

• Spécifiez la couleur du texte, l'alignement du texte, la couleur d'arrière-plan et le remplissage.

Sur le « classe conteneur » div :

• Met le ' afficher « valeur de la propriété à » fléchir » pour créer la Flexbox.
• Utilisez le ' justifier-contenu ' pour ajouter de l'espace entre le contenu et ajouter un remplissage.

Sur la classe de colonne :

• Tout d’abord, précisez la valeur indiquée au « fléchir ” pour ajouter un espace entre les deux sections de mise en page.
• Après cela, ajoutez la couleur d'arrière-plan, la bordure, le remplissage et la taille de la boîte.

Étape 3 : Appliquer la requête multimédia

• Pour appliquer une requête multimédia pour les appareils mobiles, ajoutez d’abord le «  @médias ' étiqueter.
• Ensuite, précisez la valeur « 768px ' ce qui est typique pour les appareils mobiles au ' largeur maximale » propriété au sein des petites accolades.
• Après cela, précisez le « colonne 'valeur au' direction flexible » propriété qui s’appliquera à la « classe « conteneur-classe ». Cela transformera les deux colonnes en une seule colonne chaque fois que la taille d'écran spécifiée est détectée.
• Enfin, appliquez CSS sur le ' colonne 'classer et préciser' marge ' et ' fléchir ' valeurs:

Sortir
Voici le résultat de la page Web après avoir appliqué la requête multimédia. Cette sortie est une mise en page réactive à deux colonnes :

Chaque fois que l'écran répond aux dimensions spécifiées à l'aide d'une requête multimédia pour mobile, il se transforme en une disposition à une colonne :

Conclusion

Pour implémenter des requêtes multimédias pour les appareils mobiles, incluez d’abord le «  fenêtre ' dans le ' tête ' section. Ensuite, écrivez du CSS spécifique à la conception mobile. Après cela, ajoutez la requête multimédia en utilisant la balise « @media » et en spécifiant la taille de l'écran du mobile. Par exemple, spécifiez 768 px pour les tablettes et 480 px pour les téléphones mobiles. Cet article a expliqué la procédure de mise en œuvre des requêtes multimédias pour les appareils mobiles.