Home-theater-designers
Si vous souhaitez développer des sites Web/des applications Web, alors 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 aux différentes tailles d'écran était un luxe que les propriétaires de sites Web devaient demander à un développeur. Cependant, l'augmentation de l'utilisation des smartphones et des tablettes a maintenant fait du responsive design une nécessité dans le monde du développement de logiciels.
L'utilisation de requêtes multimédias est de loin 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 résumé, la conception réactive consiste à utiliser HTML/CSS pour créer une mise en page de site Web/d'application Web qui s'adapte à différentes tailles d'écran. En HTML/CSS, il existe différentes manières d'obtenir de la réactivité dans la conception d'un site Web :
- Utiliser des unités rem et em au lieu de pixels (px)
- Définition de la fenêtre d'affichage/de l'échelle de chaque page Web
- Utilisation des requêtes média
Que sont les requêtes média ?
Une requête mé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/écran (mode paysage ou portrait).
Lire la suite : L'aide-mémoire des propriétés essentielles CSS3
Les requêtes média fournissent un cadre pour créer du code une seule fois et l'utiliser plusieurs fois dans votre programme. Cela peut ne pas sembler très 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 s'avérera être un gain de temps considérable.
Utilisation des requêtes média
Vous devez prendre en compte plusieurs éléments lorsque vous utilisez des requêtes média : la structure, le placement, la plage et la liaison.
La structure des requêtes média
Exemple de structure de requête média
@media only/not media-type and (expression){
/*CSS code*/
}La structure générale d'une requête média comprend :
- Le mot clé @media
- Le mot-clé pas/seulement
- Un type de support (qui peut être soit écran, impression ou parole)
- Le mot-clé et
- Une expression unique entre parenthèses
- Code CSS enfermé dans une paire d'accolades ouvertes et fermées.
En rapport: Utilisation de CSS pour formater les documents à imprimer
Exemple de requête média avec le seul mot-clé
@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}L'exemple ci-dessus applique le style CSS (en particulier une couleur d'arrière-plan bleue) uniquement aux écrans d'appareils d'une largeur de 450 pixels et moins, donc essentiellement des smartphones. Le seul mot-clé peut être remplacé par le mot-clé not, puis le style CSS dans la requête média ci-dessus ne s'appliquerait qu'à l'impression et à la parole.
Cependant, par défaut, une déclaration de requête 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.
Exemple de requête de média par défaut
/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}Le placement des requêtes médiatiques
Une requête média est une propriété CSS ; il ne peut donc être utilisé que dans le langage de style. Il existe trois manières différentes d'inclure 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 de la balise à la balise du fichier HTML et la création de la requête multimédia dans les paramètres de la balise.
La méthode externe consiste à créer une requête multimédia dans un fichier CSS externe et à la lier à votre fichier HTML via la balise.
La gamme de requêtes multimédias
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 affecter négativement 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 d'une requête média, chaque nouvelle requête média ajoutée au fichier CSS remplace (ou a priorité sur) la précédente.
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 vouliez 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.
Exemple de requête multimédia sur tablette
/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}
Le seul problème est que, en raison de l'ordre de priorité, les tablettes auraient une couleur de fond rouge et les smartphones auraient désormais également une couleur de fond rouge car 450px et moins sont inférieurs à 800px.
Une façon de résoudre ce petit problème serait d'ajouter la requête multimédia pour les tablettes avant celles pour les smartphones ; ce dernier remplacerait le premier et vous auriez maintenant des smartphones avec une couleur de fond bleue 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édia connue sous le nom de spécification de plage, où le développeur peut créer une requête multimédia avec la largeur maximale et minimale (la plage).
Requête de support de tablette avec exemple de plage
/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}
Avec l'exemple ci-dessus, le placement des requêtes multimédias dans une feuille de style devient sans importance car la conception pour les tablettes et les smartphones cible deux collections distinctes de largeur.
Lier les requêtes multimédias
Si vous ne souhaitez pas intégrer de requêtes multimédias dans votre code CSS, il existe une méthode alternative que vous pouvez utiliser. Cette méthode consiste à utiliser des requêtes multimédias dans la balise d'un fichier HTML. Ainsi, au lieu d'avoir une feuille de style massive contenant les préférences de style pour les smartphones, les tablettes et les ordinateurs, vous pouvez utiliser trois fichiers CSS distincts et créer vos requêtes multimédias dans la balise.
La balise est un élément HTML utilisé pour importer un style CSS à partir d'une feuille de style externe. Cette balise a une propriété média qui fonctionne de la même manière qu'une requête média en CSS.
Exemple d'utilisation de Media Queries dans la balise Link
href='tablet.css'>
Le code ci-dessus doit être placé dans la balise de votre fichier HTML. Maintenant, tout ce que vous avez à faire est de créer trois fichiers CSS distincts avec les noms de fichier main.css, tablet.css et smartphone.css, puis de créer le design spécifique que vous souhaitez pour chaque appareil.
Le style du fichier principal s'appliquera à tous les écrans d'une largeur supérieure à 800px, le style du fichier tablette s'appliquera à tous les écrans d'une largeur comprise entre 450px et 801px, et le style du fichier smartphone s'appliquera à tous les écrans ci-dessous 451px.
combien coûte le remplacement de la batterie macbook pro
Vous avez maintenant les outils pour créer des designs réactifs
Si vous êtes arrivé à la fin de cet article, vous avez pu apprendre 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
Partager Partager Tweeter E-mail Comment définir une image d'arrière-plan en CSSCSS est un outil puissant pour le style des pages Web. Apprendre à placer une image d'arrière-plan vous apprend beaucoup de bases CSS.
Lire la suite Rubriques connexes- La programmation
- Développement web
- Création de sites web
- CSS
Kadeisha Kean est un développeur de logiciels Full-Stack et un rédacteur technique/technologique. Elle a la capacité distincte de simplifier certains des concepts technologiques les plus complexes; produire du matériel qui peut être facilement compris par tout novice en technologie. Elle est passionnée par l'écriture, le développement de logiciels intéressants et les voyages à travers le monde (à travers des documentaires).
Plus de Kadeisha KeanAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner