Afin d’implémenter une conception Web réactive, il est important de comprendre les requêtes media en CSS, en particulier les requêtes media only et media screen.

Commençons par la question évidente.

Qu’est-ce qu’une requête multimédia ?

Une requête multimédia est une technique introduite dans CSS3. La requête consiste à utiliser la règle @media pour exécuter un bloc de propriétés CSS dans le cas où une condition prédéterminée est vraie.

Par exemple, le code ci-dessous dicte que si la fenêtre du navigateur est inférieure ou égale à 400 pixels, la couleur d’arrière-plan sera vert clair :

@media only screen et (max-width: 400 pixels) {
body {
Background-color:lightgreen;
}
}

Les requêtes médias sont particulièrement utiles pour ajouter des points d’arrêt pour une conception réactive. Étant donné que les points d’arrêt sont essentiellement des nombres de pixels auxquels le contenu ou la conception apparaît différemment pour les utilisateurs, les requêtes multimédia sont utilisées pour définir les modifications qui doivent se produire à quels pixels.

Dans l’exemple ci-dessous, le code indique que si la fenêtre du navigateur est réduite en dessous de 600 pixels, chaque largeur de colonne doit devenir 100%:

/* Pour le bureau:*/
.col-1 {largeur: 8,33%; }
.col-2 {largeur: 16,66%; }
.col-3 {largeur: 25%; }
.col-4 {largeur: 33,33%; }
.col-5 {largeur: 41,66%; }
.col-6 {largeur: 50%; }
.col-7 {largeur: 58,33%; }
.col-8 {largeur: 66,66%; }
.col-9 {largeur: 75%; }
.col-10 {largeur: 83,33%; }
.col-11 {largeur: 91,66%; }
.col-12 {width: 100%; }

@écran multimédia uniquement et (max-width: 600px) {
/* Pour les téléphones mobiles: */
{
width: 100%;
}
}

Chaque requête multimédia se compose d’un type de média optionnel et d’une ou plusieurs expressions de fonctionnalité multimédia. Il est possible de combiner plusieurs requêtes multimédia avec des opérateurs logiques. Toutes les requêtes multimédias sont sensibles à la casse.

Chaque requête multimédia est considérée comme vraie lorsque le type de média spécifié correspond aux périphériques sur lesquels le site Web est affiché. De plus, les expressions de fonctionnalité multimédia doivent également être vraies.

Qu’est-ce que la requête media-screen ?

La requête @media screen signifie simplement que la requête en question est destinée aux écrans couleur ou aux appareils prenant en charge un mode « écran ”.

Prenons un exemple:

@media screen and (max-width:500px)

La requête ci-dessus s’applique aux écrans d’une largeur maximale de 500 pixels. Le but de ceci est principalement de diriger le code pour faire la distinction entre « écran’ et d’autres types de supports (tels que l’impression, le braille, le relief, l’ordinateur de poche, etc.).

Qu’est-ce que la requête média uniquement ?

En ajoutant l’opérateur logique ‘only’ à la requête multimédia, le développeur s’assure que la requête n’est appliquée que si la condition entière correspond. Si vous ne l’utilisez pas uniquement, les navigateurs plus anciens pourraient ne pas lire ou interpréter toutes les expressions de fonctionnalité multimédia. Par exemple, si la requête est

@media screen et (max-width:500px)

les navigateurs plus anciens peuvent interpréter la requête comme un simple écran et ignorer le nombre de pixels. Cela conduirait à l’application de la condition de requête sur tous les écrans. Pour éviter cela, vous pouvez utiliser :

écran @media uniquement et (max-width:500px)

Lorsque vous utilisez le seul opérateur, assurez-vous de spécifier le type de support.

Importance dans la conception réactive

Les requêtes multimédias jouent un rôle déterminant dans la mise en œuvre de la conception Web réactive. Les requêtes discutées ci-dessus sont deux des plus couramment utilisées et sont utiles pour garantir que le contenu de votre site Web est optimisé pour les tailles et les types d’appareils.

Une fois que vous avez utilisé des requêtes CSS sur votre site Web, assurez-vous de vérifier leur efficacité. La façon la plus simple de le faire est d’utiliser un outil qui vous permet de tester la conception de votre site Web sur de vrais appareils et navigateurs. Il existe plusieurs outils pour faciliter cela, mais prenez votre temps pour trouver un vérificateur réactif en ligne qui vous donne la possibilité de tester sur une variété suffisamment large d’appareils — à la fois de bureau et mobiles.