`@media` et Conception Réactive
Cet article explique @media et la conception réactive.
Vous apprendrez à créer des mises en page flexibles grâce à la syntaxe de base et aux exemples d’utilisation de @media.
YouTube Video
HTML pour l'aperçu
css-responsive-media.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-responsive-media.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Responsive Design</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>@media</h2>
20 </header>
21 <article>
22 <h3>@media Syntax</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26@media media-type and (condition) {
27 /* Styles applied when the media query is matched */
28}
29</pre>
30 </section>
31 </article>
32 <article>
33 <h3>@media Example : max-width</h3>
34 <section>
35 <header><h4>CSS</h4></header>
36<pre class="sample">
37@media screen and (max-width: 600px) {
38 body {
39 background-color: lightblue;
40 }
41 p {
42 font-size: 14px;
43 }
44}
45</pre>
46 </section>
47 </article>
48 <article>
49 <h3>@media Example : orientation</h3>
50 <section>
51 <header><h4>CSS</h4></header>
52<pre class="sample">
53@media screen and (orientation: landscape) {
54 body {
55 background-color: lightgreen;
56 }
57}
58</pre>
59 </section>
60 </article>
61 <article>
62 <h3>@media Example : min-width & max-width</h3>
63 <section>
64 <header><h4>CSS</h4></header>
65<pre class="sample">
66@media screen and (min-width: 768px) and (max-width: 1024px) {
67 body {
68 background-color: lightgray;
69 }
70}
71</pre>
72 </section>
73 </article>
74 <article>
75 <h3>@media Example : devices</h3>
76 <section>
77 <header><h4>CSS</h4></header>
78<pre class="sample">
79/* Mobile styles */
80@media screen and (max-width: 600px) {
81 body {
82 font-size: 14px;
83 }
84}
85
86/* Tablet styles */
87@media screen and (min-width: 601px) and (max-width: 1024px) {
88 body {
89 font-size: 16px;
90 }
91}
92
93/* Desktop styles */
94@media screen and (min-width: 1025px) {
95 body {
96 font-size: 18px;
97 }
98}
99</pre>
100 </section>
101 </article>
102 </main>
103</body>
104</html>Règles @media
@media est une règle permettant d'utiliser les requêtes CSS media pour appliquer des styles en fonction de conditions spécifiques. Cela permet d'appliquer différents styles CSS selon la taille de l'écran, l'orientation, la résolution ou d'autres caractéristiques de l'appareil. Principalement utilisé pour le design responsive, il permet d'adapter l'apparence sur différents appareils tels que les ordinateurs de bureau, les tablettes et les mobiles.
Syntaxe de base
1@media media-type and (condition) {
2 /* Styles applied when the media query is matched */
3}- Dans
media-type, précisez le type de média (par exemple,screen,print). - Dans
condition, précisez des conditions comme la taille de l'écran ou la résolution.
Types de médias
- screen : Styles pour l'affichage sur écran, comme sur les ordinateurs et les smartphones.
- print : Ce style est appliqué pour l'impression.
- all : Ce style est appliqué à tous les médias.
Conditions couramment utilisées
- min-width / max-width : Appliquer des styles en fonction de la largeur minimale/maximale de l'écran.
- min-height / max-height : Appliquer des styles en fonction de la hauteur minimale/maximale de l'écran.
- orientation : Spécifiez l'orientation de l'écran (
portraitpour vertical,landscapepour horizontal). - resolution : Appliquer des styles en fonction de la résolution de l'écran (par exemple, DPI).
Exemple d'utilisation
Changements de style en fonction de la largeur de l'écran
Par exemple, pour spécifier des styles appliqués lorsque la largeur de l'écran est inférieure à 600 pixels, vous pouvez écrire ceci :.
1@media screen and (max-width: 600px) {
2 body {
3 background-color: lightblue;
4 }
5 p {
6 font-size: 14px;
7 }
8}- Sur les appareils avec une largeur d'écran de 600px ou moins, la couleur de fond devient bleu clair et la taille de police des paragraphes passe à 14px.
Styles basés sur l'orientation de l'écran
Pour appliquer des styles lorsque l'appareil est en orientation paysage, vous pouvez écrire ceci :.
1@media screen and (orientation: landscape) {
2 body {
3 background-color: lightgreen;
4 }
5}- Lorsque l'écran est en mode paysage, la couleur de fond devient vert clair.
3. Exemple de combinaison de plusieurs conditions
Vous pouvez combiner plusieurs conditions avec and pour appliquer des styles à des conditions plus spécifiques.
1@media screen and (min-width: 768px) and (max-width: 1024px) {
2 body {
3 background-color: lightgray;
4 }
5}- Si la largeur de l'écran est comprise entre 768px et 1024px, la couleur de fond devient gris clair.
Exemple d'application : Design réactif
1/* Mobile styles */
2@media screen and (max-width: 600px) {
3 body {
4 font-size: 14px;
5 }
6}
7
8/* Tablet styles */
9@media screen and (min-width: 601px) and (max-width: 1024px) {
10 body {
11 font-size: 16px;
12 }
13}
14
15/* Desktop styles */
16@media screen and (min-width: 1025px) {
17 body {
18 font-size: 18px;
19 }
20}En design réactif, il est courant d'appliquer des mises en page différentes selon la largeur de l'écran.
- Les tailles de police changent sur mobile (600px ou moins), tablette (601px à 1024px) et ordinateur de bureau (1025px ou plus).
Résumé
@media est un outil puissant pour basculer entre les styles CSS en fonction des appareils et des tailles d'écran, et il est essentiel pour le design réactif. En utilisant habilement des conditions comme min-width et max-width, vous pouvez créer un site web optimisé pour divers appareils.
Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.