Comment utiliser les requêtes multimédias en HTML et CSS pour créer des sites Web réactifs

Si vous souhaitez développer des sites Web / applications Web, savoir comment créer des conceptions réactives est essentiel à votre succès.

Dans le passé, la création de sites Web qui s'adaptaient bien à différentes tailles d'écran était un luxe que les propriétaires de sites Web devaient demander à un développeur. Cependant, la montée en puissance de l'utilisation des smartphones et des tablettes fait désormais du responsive design une nécessité dans le monde du développement logiciel.

L'utilisation de requêtes multimédias est sans conteste le meilleur moyen de garantir que votre site Web / application Web s'affiche exactement comme vous le souhaitez sur chaque appareil.

Comprendre la conception réactive

En un mot, la conception réactive consiste à utiliser HTML / CSS pour créer une mise en page de site Web / application Web qui s'adapte à différentes tailles d'écran. En HTML / CSS, il existe plusieurs façons d'atteindre la réactivité dans la conception d'un site Web:

• Utilisation des unités rem et em au lieu de pixels (px)
instagram viewer
• Définition de la fenêtre / de l'échelle de chaque page Web
• Utilisation des requêtes multimédias

Une requête multimédia est une fonctionnalité de CSS qui a été publiée dans la version CSS3. Avec l'introduction de cette nouvelle fonctionnalité, les utilisateurs de CSS ont la possibilité d'ajuster l'affichage d'une page Web en fonction de la hauteur, de la largeur et de l'orientation de l'appareil / de l'écran (mode paysage ou portrait).

Lire la suite: Aide-mémoire sur les propriétés CSS3 essentielles

Les requêtes multimédias fournissent un cadre pour créer du code une fois et l'utiliser plusieurs fois dans votre programme. Cela peut ne pas sembler si utile si vous développez un site Web avec seulement trois pages Web, mais si vous travaillez pour une entreprise avec des centaines de pages Web différentes. Cela se révélera être un temps énorme épargnant.

Vous devez prendre en compte plusieurs éléments lorsque vous utilisez des requêtes multimédias: structure, placement, plage et liaison.

@media uniquement / pas de type de média et (expression) {
/ * Code CSS * /
}

La structure générale d'une requête multimédia comprend:

• Le mot-clé @media
• Le mot-clé non / unique
• Un type de support (qui peut être soit écran, impression ou discours)
• Le mot-clé "et"
• Une expression unique entre parenthèses
• Code CSS inclus dans une paire d'accolades ouvertes et fermées.

En rapport: Utilisation de CSS pour formater des documents à imprimer

@média uniquement écran et (max-width: 450px) {
corps{
couleur de fond: bleu;
}
}

L'exemple ci-dessus applique le style CSS (en particulier une couleur d'arrière-plan bleu) uniquement aux écrans de périphériques d'une largeur de 450 pixels et moins, donc essentiellement des smartphones. Le mot clé «only» peut être remplacé par le mot clé «not», puis le style CSS dans la requête multimédia ci-dessus ne s'appliquerait qu'à l'impression et à la parole.

Cependant, par défaut, une déclaration de requête de média générale s'applique aux trois types de média, il n'est donc pas nécessaire de spécifier un type de média, sauf si l'objectif est d'en exclure un ou plusieurs.

/ * design pour smartphones * /
@media (largeur maximale: 450px) {
corps{
couleur de fond: bleu;
}
}

Une requête multimédia est une propriété CSS; il ne peut donc être utilisé que dans le langage de style. Il existe trois façons différentes d'inclure du CSS dans votre code; cependant, seules deux de ces méthodes offrent un moyen pratique d'inclure des requêtes multimédias dans vos programmes: CSS interne ou externe.

La méthode interne comprend l'ajout du

La méthode externe consiste à créer une requête multimédia dans un fichier CSS externe et à la lier à votre fichier HTML via le étiqueter.

Que les requêtes multimédias soient utilisées via CSS interne ou externe, il existe un aspect majeur du langage de style qui peut avoir un impact négatif sur le fonctionnement d'une requête multimédia. CSS a une règle d'ordre de priorité. Lors de l'utilisation d'un Sélecteur CSS, ou dans ce cas une requête multimédia, chaque nouvelle requête multimédia ajoutée au fichier CSS remplace (ou prime) celle qui précède.

Le code de requête multimédia par défaut que nous avons ci-dessus cible les smartphones (450 pixels de large et moins), donc si vous souhaitez définir un arrière-plan différent pour les tablettes, vous pourriez penser que vous pourriez simplement ajouter le code suivant à votre fichier CSS préexistant.

/ * design pour tablettes * /
@media (largeur maximale: 800px) {
corps{
couleur de fond: rouge;
}
}

Le seul problème est que, en raison de l'ordre de priorité, les tablettes auraient une couleur d'arrière-plan rouge et les smartphones auraient désormais également une couleur d'arrière-plan rouge car 450 pixels et moins sont inférieurs à 800 pixels.

Une façon de résoudre ce petit problème serait d'ajouter la requête média pour les tablettes avant celle pour les smartphones; ce dernier remplacerait l'ancien et vous auriez maintenant des smartphones avec une couleur de fond bleu et des tablettes avec une couleur de fond rouge.

Cependant, il existe un meilleur moyen d'obtenir un style distinct pour les smartphones et les tablettes sans se soucier de l'ordre de priorité. Il s'agit d'une fonctionnalité des requêtes multimédias connue sous le nom de spécification de plage, dans laquelle le développeur peut créer une requête multimédia avec la largeur maximale et minimale (la plage).

/ * design pour tablettes * /
@media (max-width: 800px) et (min-width: 451) {
corps{
couleur de fond: rouge;
}
}

Avec l'exemple ci-dessus, le placement des requêtes multimédias dans une feuille de style devient inutile car la conception des tablettes et des smartphones cible deux collections distinctes de largeur.

Si vous ne souhaitez pas intégrer de requêtes multimédias dans votre code CSS, il existe une autre méthode que vous pouvez utiliser. Cette méthode implique l'utilisation de requêtes multimédias dans le balise d'un fichier HTML, donc au lieu d'avoir une feuille de style massive contenant les préférences de style pour smartphones, tablettes et ordinateurs: vous pouvez utiliser trois fichiers CSS distincts et créer vos requêtes multimédias dans le étiqueter.

Le La balise est un élément HTML utilisé pour importer le style CSS à partir d'une feuille de style externe. Cette balise a une propriété multimédia qui fonctionne de la même manière qu'une requête multimédia en CSS.

 feuille de style principale 

 feuille de style de la tablette 
href = "tablet.css">
 feuille de style smartphone 

Le code ci-dessus doit être placé dans le

balise de votre fichier HTML. Il ne vous reste plus qu'à créer trois fichiers CSS distincts avec les noms de fichier main.css, tablet.css et smartphone.css, puis créer la conception spécifique que vous souhaitez pour chaque appareil.

Le style du fichier principal s'appliquera à tous les écrans d'une largeur supérieure à 800 pixels, le style du fichier de la tablette s'appliquera à tous les écrans d'une largeur comprise entre 450px et 801px, et le style du fichier du smartphone s'appliquera à tous les écrans ci-dessous 451px.

Si vous êtes arrivé à la fin de cet article, vous avez pu découvrir ce qu'est le responsive design et pourquoi il est utile. Vous pouvez désormais identifier et utiliser les requêtes multimédias dans les fichiers CSS et HTML. De plus, vous avez été initié à l'ordre de priorité dans CSS et avez vu comment cela pourrait affecter le fonctionnement de vos requêtes multimédias.

Crédit d'image: Espace négatif /Pexels

Comment définir une image d'arrière-plan dans CSS

CSS est un outil puissant pour styliser les pages Web. Apprendre à placer une image d'arrière-plan vous apprend beaucoup de bases CSS.

Lire la suite

A propos de l'auteur