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

@media screen et (min-width: 1000px) { }

C'est la syntaxe d'une requête média. Cela commence par @médias pour établir la Media Query elle-même. Ensuite, définissez le type de support, qui dans ce cas est écran. Ce type s'applique aux écrans d'ordinateurs de bureau, tablettes, téléphones, etc. Terminez la requête multimédia avec le fonction multimédia. Dans notre exemple ci-dessus, c'est mi-largeur: 1000px. Cela signifie que la Media Query entre en jeu pour les affichages d'une largeur minimale de 1000 pixels de large.

Après ces éléments de la requête média, ajoutez une accolade ouvrante et fermante similaire à ce que vous feriez dans n'importe quelle règle CSS normale.

La dernière étape d'une requête média consiste à ajouter les règles CSS à appliquer une fois cette condition remplie. Insérez ces règles CSS entre les accolades qui composent la requête média, comme ceci :

 @media screen et (min-width: 1000px) { body { font-size: 20px; }

Lorsque les conditions de la Media Query sont remplies (la fenêtre du navigateur fait au moins 1000 pixels de large), ce style CSS prend effet, en changeant la taille de la police de notre site des 16 pixels que nous avons établis à l'origine à notre nouvelle valeur de 20 pixels. 
 Ajouter plus de styles 

Placez autant Règles CSS dans cette requête média si nécessaire pour ajuster l'apparence visuelle de votre site Web. Par exemple, pour non seulement augmenter la taille de la police à 20 pixels, mais également changer la couleur de tous les paragraphes en noir (#000000), ajoutez ceci: 
@media screen et (min-width: 1000px) {
corps {
taille de la police: 20 px ;
}
p {
couleur: #000000 ;
}
}
 Ajout d'autres 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: 
@media screen et (min-width: 1000px) {
corps {
taille de la police: 20 px ;
}
p {
couleur: #000000 ;
{
}
@media screen et (min-width: 1400px) {
corps {
taille de la police: 24 px ;
}
}

Les premières Media Queries démarrent à 1000 pixels de large, modifiant la taille de la police à 20 pixels. Ensuite, une fois que le navigateur dépassait les 1400 pixels, la taille de la police passait à nouveau à 24 pixels. Ajoutez autant de Media Queries que nécessaire pour votre site Web particulier. 
 Min-Width et Max-Width 

Il existe généralement deux manières d'écrire des requêtes média: en utilisant min-largeur ou avec largeur maximale. Jusqu'à présent, nous avons vu min-width en action. Cette approche active les requêtes multimédias une fois qu'un navigateur atteint au moins cette largeur minimale. Donc une requête qui utilise largeur minimale: 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 d'une manière mobile. 

Si tu utilises largeur maximale, cela fonctionne de la manière opposée. Une requête média de "largeur max: 1000px" s'applique une fois que le navigateur est tombé en dessous de cette taille. 

Citez cet article.