Aperçu du design réactif en CSS
Cet article explique la vue d'ensemble du design réactif en CSS.
Nous donnerons une vue d'ensemble du concept de base du design réactif et du rôle du CSS dans sa mise en œuvre.
YouTube Video
HTML pour l'aperçu
css-responsive-overview.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-overview.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>Responsive Design Related Properties</h2>
20 </header>
21 <article>
22 <h3>Media Queries</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26/* When the screen width is 600px or less */
27@media (max-width: 600px) {
28 body {
29 background-color: lightblue;
30 }
31}
32/* When the screen width is between 601px and 1200px */
33@media (min-width: 601px) and (max-width: 1200px) {
34 body {
35 background-color: lightgreen;
36 }
37}
38/* When the screen width is 1201px or more */
39@media (min-width: 1201px) {
40 body {
41 background-color: lightyellow;
42 }
43}
44</pre>
45 </section>
46 </article>
47 <article>
48 <h3>Fluid Layouts</h3>
49 <section>
50 <header><h4>CSS</h4></header>
51<pre class="sample">
52.container {
53 width: 80%; /* 80% width relative to the parent element */
54 margin: 0 auto; /* Center the element */
55}
56</pre>
57 </section>
58 </article>
59 <article>
60 <h3>Responsive Images</h3>
61 <section>
62 <header><h4>CSS</h4></header>
63<pre class="sample">
64img {
65 max-width: 100%;
66 height: auto;
67}
68</pre>
69 </section>
70 </article>
71 <article>
72 <h3>Viewport</h3>
73 <section>
74 <header><h4>HTML</h4></header>
75 <pre><meta name="viewport" content="width=device-width, initial-scale=1.0"></pre>
76 </section>
77 </article>
78 <article>
79 <h3>CSS Frameworks</h3>
80 <section>
81 <header><h4>HTML</h4></header>
82<pre>
83<div class="container">
84 <div class="row">
85 <div class="col-md-6">Left content</div>
86 <div class="col-md-6">Right content</div>
87 </div>
88</div>
89</pre>
90 </section>
91 </article>
92 <article>
93 <h3>Flexbox & Grid Layout</h3>
94 <section>
95 <header><h4>CSS</h4></header>
96<pre class="sample">
97/* Flex Example */
98.container {
99 display: flex;
100 flex-wrap: wrap; /* Allow elements to wrap */
101}
102
103.item {
104 flex: 1 1 200px; /* Each item has a minimum width of 200px */
105}
106
107/* Grid Example */
108.container {
109 display: grid;
110 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
111 gap: 16px;
112}
113</pre>
114 </section>
115 </article>
116 </main>
117</body>
118</html>Aperçu du design réactif en CSS
En CSS, le design réactif est une technique permettant d'afficher correctement la mise en page et le contenu d'une page web sur divers appareils et tailles d'écran, tels que les smartphones, les tablettes et les ordinateurs de bureau. Pour réaliser un design réactif, les techniques et méthodes suivantes sont principalement utilisées.
Requêtes Media (Media Queries)
1/* When the screen width is 600px or less */
2@media (max-width: 600px) {
3 body {
4 background-color: lightblue;
5 }
6}
7/* When the screen width is between 601px and 1200px */
8@media (min-width: 601px) and (max-width: 1200px) {
9 body {
10 background-color: lightgreen;
11 }
12}
13/* When the screen width is 1201px or more */
14@media (min-width: 1201px) {
15 body {
16 background-color: lightyellow;
17 }
18}Les requêtes media sont une fonctionnalité qui permet d'appliquer différentes règles CSS en fonction de la largeur, de la hauteur, de la résolution de l'appareil, et plus encore. Cela permet d'appliquer différents styles selon la taille de l'écran.
Dans cet exemple, la couleur de fond change en fonction de la largeur de l'écran.
Mises en page fluides
1.container {
2 width: 80%; /* 80% width relative to the parent element */
3 margin: 0 auto; /* Center the element */
4}Dans le design réactif, la largeur et la hauteur des éléments sont spécifiées à l'aide d'unités relatives comme les pourcentages ou em au lieu de valeurs pixellisées absolues. Cela permet à la mise en page de s'adapter de manière flexible à la taille de l'écran.
Images réactives
1img {
2 max-width: 100%;
3 height: auto;
4}Les images sont également configurées pour s'adapter en fonction de la taille de l'écran. Par exemple, l'utilisation de max-width peut ajuster les images afin qu'elles ne dépassent pas la largeur de leur élément parent.
Paramètres de la fenêtre d'affichage (Viewport)
1<meta name="viewport" content="width=device-width, initial-scale=1.0">Utilisez la balise <meta> en HTML pour garantir que le navigateur interprète correctement la largeur de l'écran de l'appareil. Sans cela, le design réactif ne fonctionnera pas correctement, notamment sur les appareils mobiles.
Utilisation des frameworks CSS
Les frameworks CSS comme Bootstrap et Tailwind CSS sont souvent utilisés pour réaliser efficacement un design réactif. Ces frameworks sont conçus pour créer facilement des mises en page réactives à l'aide de classes prédéfinies.
Exemple : le système de grille de Bootstrap
1<div class="container">
2 <div class="row">
3 <div class="col-md-6">Left content</div>
4 <div class="col-md-6">Right content</div>
5 </div>
6</div>Dans l'exemple ci-dessus, lorsque la largeur de l'écran est md (taille moyenne, généralement 768px ou plus), deux colonnes sont disposées côte à côte, mais sur des écrans plus étroits, elles sont disposées verticalement.
Disposition Flexbox et Grille
1/* Flex Example */
2.container {
3 display: flex;
4 flex-wrap: wrap; /* Allow elements to wrap */
5}
6
7.item {
8 flex: 1 1 200px; /* Each item has a minimum width of 200px */
9}
10
11/* Grid Example */
12.container {
13 display: grid;
14 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
15 gap: 16px;
16}L'utilisation du CSS flexbox ou grid permet des ajustements flexibles des dispositions. Ces techniques de disposition sont idéales pour le design réactif, car elles facilitent l'ajustement automatique des mises en page en fonction de la taille de l'écran.
Résumé
Le design réactif est une méthode importante pour garantir que les utilisateurs puissent consulter les sites web confortablement, quel que soit l'appareil qu'ils utilisent. En combinant des requêtes media, des dispositions flexibles, des frameworks, et des nouvelles technologies de mise en page comme Flexbox et Grid, il est possible de créer des pages web plus flexibles et adaptatives.
Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.