Ikhtisar Desain Responsif dalam CSS
Artikel ini menjelaskan gambaran umum desain responsif dalam CSS.
Kami akan memberikan gambaran umum tentang konsep dasar desain responsif dan peran CSS dalam penerapannya.
YouTube Video
HTML untuk Pratinjau
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>Ikhtisar Desain Responsif dalam CSS
Dalam CSS, desain responsif adalah teknik untuk menampilkan tata letak dan konten halaman web dengan tepat pada berbagai perangkat dan ukuran layar, seperti ponsel pintar, tablet, dan desktop. Untuk mencapai desain responsif, teknik dan metode berikut ini yang terutama digunakan.
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}Media queries adalah fitur yang memungkinkan Anda menerapkan aturan CSS yang berbeda berdasarkan lebar, tinggi, resolusi perangkat, dan lainnya. Hal ini memungkinkan penerapan gaya yang berbeda tergantung pada ukuran layar.
Dalam contoh ini, warna latar belakang berubah sesuai dengan lebar layar.
Tata Letak Fleksibel
1.container {
2 width: 80%; /* 80% width relative to the parent element */
3 margin: 0 auto; /* Center the element */
4}Dalam desain responsif, lebar dan tinggi elemen ditentukan menggunakan satuan relatif seperti persentase atau em alih-alih menggunakan nilai piksel absolut. Hal ini memungkinkan tata letak untuk berubah secara fleksibel sesuai dengan ukuran layar.
Gambar Responsif
1img {
2 max-width: 100%;
3 height: auto;
4}Gambar juga diatur agar menyesuaikan ukuran berdasarkan ukuran layar. Misalnya, menggunakan max-width dapat menyesuaikan gambar sehingga tidak melebihi lebar elemen induknya.
Pengaturan Viewport
1<meta name="viewport" content="width=device-width, initial-scale=1.0">Gunakan tag <meta> dalam HTML untuk memastikan browser menginterpretasikan lebar layar perangkat dengan benar. Tanpa ini, desain responsif tidak akan berfungsi dengan benar, terutama pada perangkat seluler.
Pemanfaatan Framework CSS
Framework CSS seperti Bootstrap dan Tailwind CSS sering digunakan untuk mencapai desain responsif secara efisien. Framework ini dirancang untuk dengan mudah membuat tata letak responsif menggunakan kelas yang telah ditentukan sebelumnya.
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, ketika lebar layar adalah md (ukuran sedang, umumnya 768px atau lebih), dua kolom diatur berdampingan, tetapi pada layar yang lebih sempit, kolom diatur secara vertikal.
Tata Letak Flexbox dan 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 flexbox atau grid CSS memungkinkan penyesuaian tata letak yang fleksibel. Teknik tata letak ini sangat cocok untuk desain responsif karena memudahkan pengaturan tata letak secara otomatis sesuai dengan ukuran layar.
Ringkasan
Desain responsif adalah metode penting untuk memastikan pengguna dapat melihat situs web dengan nyaman terlepas dari perangkat yang mereka gunakan. Dengan menggabungkan media query, tata letak fleksibel, kerangka kerja, dan teknologi tata letak baru seperti Flexbox dan Grid, dimungkinkan untuk menciptakan halaman web yang lebih fleksibel dan adaptif.
Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.