Gambaran Keseluruhan Reka Bentuk Responsif dalam CSS
Artikel ini menerangkan gambaran keseluruhan mengenai reka bentuk responsif dalam CSS.
Kami akan memberi gambaran keseluruhan tentang konsep asas reka bentuk responsif dan peranan CSS dalam melaksanakannya.
YouTube Video
HTML untuk Pratonton
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>Gambaran Keseluruhan Reka Bentuk Responsif dalam CSS
Dalam CSS, reka bentuk responsif adalah teknik untuk memaparkan tataletak dan kandungan laman web secara sesuai pada pelbagai peranti dan saiz skrin, seperti telefon pintar, tablet, dan komputer meja. Untuk mencapai reka bentuk responsif, terutamanya teknik dan kaedah berikut digunakan.
Pertanyaan Media
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}Pertanyaan media adalah ciri yang membolehkan anda menerapkan peraturan CSS yang berbeza berdasarkan lebar peranti, ketinggian, resolusi, dan lain-lain. Ini membolehkan gaya berbeza diterapkan bergantung pada saiz skrin.
Dalam contoh ini, warna latar belakang berubah mengikut lebar skrin.
Tataletak Fleksibel
1.container {
2 width: 80%; /* 80% width relative to the parent element */
3 margin: 0 auto; /* Center the element */
4}Dalam reka bentuk responsif, lebar dan ketinggian elemen ditentukan menggunakan unit relatif seperti peratusan atau em dan bukannya nilai piksel mutlak. Ini membolehkan tataletak berubah secara fleksibel mengikut saiz skrin.
Imej Responsif
1img {
2 max-width: 100%;
3 height: auto;
4}Imej juga disetkan untuk diskalakan mengikut saiz skrin. Sebagai contoh, menggunakan max-width boleh melaraskan imej supaya tidak melebihi lebar elemen induknya.
Tetapan Pandangan
1<meta name="viewport" content="width=device-width, initial-scale=1.0">Gunakan tag <meta> dalam HTML untuk memastikan pelayar mentafsir lebar skrin peranti dengan betul. Tanpa ini, reka bentuk responsif tidak akan berfungsi dengan betul, terutamanya pada peranti mudah alih.
Penggunaan Rangka Kerja CSS
Rangka kerja CSS seperti Bootstrap dan Tailwind CSS sering digunakan untuk mencapai reka bentuk responsif secara berkesan. Rangka kerja ini direka untuk mencipta tataletak responsif dengan mudah menggunakan kelas yang telah ditakrifkan.
Contoh: Sistem Grid 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>Dalam contoh di atas, apabila lebar skrin adalah md (sederhana, biasanya 768px atau lebih), dua lajur disusun secara bersebelahan, tetapi pada skrin yang lebih kecil, ia disusun secara menegak.
Flexbox dan Susun Atur 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}Menggunakan CSS flexbox atau grid membolehkan penyesuaian susun atur yang fleksibel. Teknik susun atur ini sangat sesuai untuk reka bentuk responsif kerana ia memudahkan penyesuaian susun atur secara automatik mengikut saiz skrin.
Ringkasan
Reka bentuk responsif adalah kaedah penting untuk memastikan pengguna dapat melihat laman web dengan selesa tanpa mengira peranti yang mereka gunakan. Dengan menggabungkan pertanyaan media, susun atur fleksibel, rangka kerja, dan teknologi susun atur baru seperti Flexbox dan Grid, adalah mungkin untuk mencipta halaman web yang lebih fleksibel dan adaptif.
Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.