Przegląd projektowania responsywnego w CSS
Ten artykuł wyjaśnia przegląd projektowania responsywnego w CSS.
Przedstawimy przegląd podstawowej koncepcji projektowania responsywnego oraz rolę CSS w jej wdrażaniu.
YouTube Video
HTML do podglądu
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>Przegląd projektowania responsywnego w CSS
W CSS projektowanie responsywne to technika odpowiedniego wyświetlania układu i zawartości strony internetowej na różnych urządzeniach i rozmiarach ekranu, takich jak smartfony, tablety i komputery stacjonarne. Aby osiągnąć projektowanie responsywne, głównie stosuje się następujące techniki i metody.
Zapytania medialne (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}Zapytania medialne to funkcja, która pozwala stosować różne reguły CSS w zależności od szerokości, wysokości, rozdzielczości urządzenia i innych parametrów. Pozwala to stosować różne style w zależności od rozmiaru ekranu.
W tym przykładzie kolor tła zmienia się w zależności od szerokości ekranu.
Płynne układy (Fluid Layouts)
1.container {
2 width: 80%; /* 80% width relative to the parent element */
3 margin: 0 auto; /* Center the element */
4}W projektowaniu responsywnym szerokość i wysokość elementów określa się za pomocą jednostek względnych, takich jak procenty lub em, zamiast wartości w pikselach. Pozwala to na elastyczne dostosowanie układu do rozmiaru ekranu.
Responsywne obrazy (Responsive Images)
1img {
2 max-width: 100%;
3 height: auto;
4}Obrazy są również ustawione tak, aby skalowały się w zależności od rozmiaru ekranu. Na przykład użycie max-width pozwala dostosować obrazy tak, aby nie przekraczały szerokości ich elementu nadrzędnego.
Ustawienia Viewport (Viewport Settings)
1<meta name="viewport" content="width=device-width, initial-scale=1.0">Użyj tagu <meta> w HTML, aby upewnić się, że przeglądarka poprawnie interpretuje szerokość ekranu urządzenia. Bez tego projektowanie responsywne nie będzie działać poprawnie, zwłaszcza na urządzeniach mobilnych.
Wykorzystanie frameworków CSS
Frameworki CSS, takie jak Bootstrap i Tailwind CSS, są często używane do efektywnego osiągania projektowania responsywnego. Te frameworki zostały zaprojektowane tak, aby łatwo tworzyć responsywne układy za pomocą wstępnie zdefiniowanych klas.
Przykład: System siatki w Bootstrapie
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>W powyższym przykładzie, gdy szerokość ekranu wynosi md (średni rozmiar, zazwyczaj 768px lub więcej), dwie kolumny są ułożone obok siebie, ale na węższych ekranach są ułożone pionowo.
Układ Flexbox i Grid
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}Korzystanie z CSS flexbox lub grid umożliwia elastyczne dostosowanie układu. Te techniki układu są dobrze dostosowane do projektowania responsywnego, ponieważ ułatwiają automatyczne dostosowywanie układów do rozmiaru ekranu.
Podsumowanie
Projektowanie responsywne to ważna metoda zapewniająca użytkownikom komfortowe przeglądanie stron internetowych, niezależnie od używanego urządzenia. Łącząc zapytania medialne, elastyczne układy, frameworki i nowe technologie układów, takie jak Flexbox i Grid, można tworzyć bardziej elastyczne i adaptacyjne strony internetowe.
Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.