-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathResponsive_design.htm
More file actions
245 lines (239 loc) · 47.8 KB
/
Responsive_design.htm
File metadata and controls
245 lines (239 loc) · 47.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!DOCTYPE html>
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/_next/static/css/e503160baa2cd0f0.css" data-precedence="next" />
<link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-457dc077475af9ee.js" />
<script src="/_next/static/chunks/4bd1b696-3cf1b1127452a604.js" async=""></script>
<script src="/_next/static/chunks/517-6cbbb564b6b7a65d.js" async=""></script>
<script src="/_next/static/chunks/main-app-8eb68113308ecd14.js" async=""></script>
<script src="/_next/static/chunks/app/layout-40e71d42d3ccdee8.js" async=""></script>
<script src="/_next/static/chunks/839-150b5850706a66a5.js" async=""></script>
<script src="/_next/static/chunks/664-604679c007c3b6d5.js" async=""></script>
<script src="/_next/static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js" async=""></script>
<meta name="next-size-adjust" />
<title>Tài liệu HTML,CSS,JS - Responsive Design</title>
<meta name="description"
content="# Responsive Design trong CSS
Responsive Design giúp website hiển thị tốt trên các thiết bị có kích thước màn hình khác nhau. Dưới đây là tổng hợp các kỹ thuật..." />
<meta property="og:title" content="Tài liệu HTML,CSS,JS - Responsive Design" />
<meta property="og:description"
content="# Responsive Design trong CSS
Responsive Design giúp website hiển thị tốt trên các thiết bị có kích thước màn hình khác nhau. Dưới đây là tổng hợp các kỹ thuật..." />
<meta property="og:image" content="https://study.sfit.com.vn/bgclb.jpg" />
<meta property="og:image:alt" content="Tài liệu HTML,CSS,JS - Responsive Design" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2024-12-10T09:01:47.295Z" />
<meta property="article:author" content="zunohoang" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Tài liệu HTML,CSS,JS - Responsive Design" />
<meta name="twitter:description"
content="# Responsive Design trong CSS
Responsive Design giúp website hiển thị tốt trên các thiết bị có kích thước màn hình khác nhau. Dưới đây là tổng hợp các kỹ thuật..." />
<meta name="twitter:image" content="https://study.sfit.com.vn/bgclb.jpg" />
<meta name="twitter:image:alt" content="Tài liệu HTML,CSS,JS - Responsive Design" />
<script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script>
</head>
<body class="__variable_1e4310 __variable_c3aa02 antialiased">
<main class="container mx-auto px-4 pt-2 py-8">
<header class="mb-3 border-b-[1px] py-5 border-gray-300 flex justify-between">
<div>
<h1 class="text-3xl font-bold">Tài liệu HTML,CSS,JS - Responsive Design</h1>
<p class="text-gray-600">Đăng bởi <i>zunohoang</i> vào <time
dateTime="2024-12-10T09:01:47.295Z">12/10/2024</time></p>
</div>
<p>👁️ <!-- -->32<!-- --> lượt xem</p>
</header>
<article>
<div class="markdown-body bg-white p-6 rounded-lg">
<h1 class="text-3xl font-bold mb-4 pb-2 border-b">Responsive Design trong CSS</h1>
<p class="mb-4">Responsive Design giúp website hiển thị tốt trên các thiết bị có kích thước màn hình
khác nhau. Dưới đây là tổng hợp các kỹ thuật và công cụ trong CSS để làm responsive.</p>
<hr />
<h2 class="text-2xl font-bold mt-6 mb-4">1. <strong>Sử dụng Media Queries</strong></h2>
<p class="mb-4">Media Queries cho phép áp dụng CSS dựa trên kích thước màn hình hoặc các đặc điểm thiết
bị khác.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cú pháp:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#c586c0">@media</span><span class="token" style="color:#ce9178"> </span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">điều kiện</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#6a9955">/* CSS áp dụng khi điều kiện đúng */</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#6a9955">/* Màn hình nhỏ hơn 768px */</span><span>
</span><span></span><span class="token" style="color:#c586c0">@media</span><span class="token" style="color:#ce9178"> </span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#9cdcfe">max-width</span><span class="token" style="color:#d4d4d4">:</span><span class="token" style="color:#ce9178"> </span><span class="token" style="color:#b5cea8">768</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#d7ba7d">body</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">font-size</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">14</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#d4d4d4">}</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span><span>
</span>
<span></span><span class="token" style="color:#6a9955">/* Màn hình lớn hơn hoặc bằng 1024px */</span><span>
</span><span></span><span class="token" style="color:#c586c0">@media</span><span class="token" style="color:#ce9178"> </span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#9cdcfe">min-width</span><span class="token" style="color:#d4d4d4">:</span><span class="token" style="color:#ce9178"> </span><span class="token" style="color:#b5cea8">1024</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#d7ba7d">body</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">font-size</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">18</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#d4d4d4">}</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<hr />
<h2 class="text-2xl font-bold mt-6 mb-4">2. <strong>Sử dụng Grid và Flexbox</strong></h2>
<p class="mb-4">Grid và Flexbox giúp tạo layout linh hoạt, dễ dàng điều chỉnh trên các kích thước màn
hình khác nhau.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ với Flexbox:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token class" style="color:#d7ba7d">.container</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">display</span><span class="token" style="color:#d4d4d4">:</span><span> flex</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">flex-wrap</span><span class="token" style="color:#d4d4d4">:</span><span> wrap</span><span class="token" style="color:#d4d4d4">;</span><span> </span><span class="token" style="color:#6a9955">/* Tự động xuống dòng khi không đủ không gian */</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span><span>
</span>
<span></span><span class="token class" style="color:#d7ba7d">.item</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">flex</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">1</span><span> </span><span class="token" style="color:#b5cea8">1</span><span> </span><span class="token" style="color:#b5cea8">200</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span> </span><span class="token" style="color:#6a9955">/* Chiều rộng tối thiểu là 200px */</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ với CSS Grid:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token class" style="color:#d7ba7d">.container</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">display</span><span class="token" style="color:#d4d4d4">:</span><span> grid</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">grid-template-columns</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#dcdcaa">repeat</span><span class="token" style="color:#d4d4d4">(</span><span>auto-fit</span><span class="token" style="color:#d4d4d4">,</span><span> </span><span class="token" style="color:#dcdcaa">minmax</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#b5cea8">200</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">,</span><span> </span><span class="token" style="color:#b5cea8">1</span><span class="token" style="color:#b5cea8">fr</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">gap</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">16</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<hr />
<h2 class="text-2xl font-bold mt-6 mb-4">3. <strong>Đơn vị linh hoạt</strong></h2>
<p class="mb-4">Sử dụng các đơn vị như <code class="bg-gray-100 rounded px-1 py-0.5">%</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">em</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">rem</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">vh</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">vw</code> thay vì <code
class="bg-gray-100 rounded px-1 py-0.5">px</code> để layout linh hoạt hơn.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#6a9955">/* Sử dụng % */</span><span>
</span><span></span><span class="token class" style="color:#d7ba7d">.container</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">width</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">100</span><span class="token" style="color:#b5cea8">%</span><span class="token" style="color:#d4d4d4">;</span><span> </span><span class="token" style="color:#6a9955">/* Chiếm toàn bộ chiều rộng */</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span><span>
</span>
<span></span><span class="token" style="color:#6a9955">/* Sử dụng vh và vw */</span><span>
</span><span></span><span class="token class" style="color:#d7ba7d">.hero</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">height</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">100</span><span class="token" style="color:#b5cea8">vh</span><span class="token" style="color:#d4d4d4">;</span><span> </span><span class="token" style="color:#6a9955">/* Chiều cao bằng 100% chiều cao màn hình */</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span><span>
</span>
<span></span><span class="token" style="color:#6a9955">/* Sử dụng rem */</span><span>
</span><span></span><span class="token" style="color:#d7ba7d">body</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">font-size</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">1</span><span class="token" style="color:#b5cea8">rem</span><span class="token" style="color:#d4d4d4">;</span><span> </span><span class="token" style="color:#6a9955">/* Tương đương font-size của phần tử root */</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<hr />
<h2 class="text-2xl font-bold mt-6 mb-4">4. <strong>Hình ảnh và Video Responsive</strong></h2>
<h3 class="text-xl font-bold mt-5 mb-3">Hình ảnh</h3>
<p class="mb-4">Sử dụng thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">max-width</code> để đảm
bảo hình ảnh không vượt quá kích thước container:</p>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">img</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">max-width</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">100</span><span class="token" style="color:#b5cea8">%</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">height</span><span class="token" style="color:#d4d4d4">:</span><span> auto</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Video</h3>
<p class="mb-4">Sử dụng tỷ lệ khung hình:</p>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token class" style="color:#d7ba7d">.video-container</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">position</span><span class="token" style="color:#d4d4d4">:</span><span> relative</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">padding-top</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">56.25</span><span class="token" style="color:#b5cea8">%</span><span class="token" style="color:#d4d4d4">;</span><span> </span><span class="token" style="color:#6a9955">/* 16:9 Aspect Ratio */</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span><span>
</span>
<span></span><span class="token class" style="color:#d7ba7d">.video-container</span><span class="token" style="color:#d7ba7d"> iframe</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">position</span><span class="token" style="color:#d4d4d4">:</span><span> absolute</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">top</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">0</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">left</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">0</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">width</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">100</span><span class="token" style="color:#b5cea8">%</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">height</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">100</span><span class="token" style="color:#b5cea8">%</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<hr />
<h2 class="text-2xl font-bold mt-6 mb-4">5. <strong>CSS Frameworks</strong></h2>
<p class="mb-4">Sử dụng framework như <strong>Bootstrap</strong>, <strong>TailwindCSS</strong> để tiết
kiệm thời gian và hỗ trợ responsive dễ dàng.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ với Bootstrap:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-html" style="white-space:pre;color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">div</span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">class</span><span class="token" style="color:#d4d4d4">=</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#ce9178">container</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#808080">></span><span>
</span><span> </span><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">div</span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">class</span><span class="token" style="color:#d4d4d4">=</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#ce9178">row</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#808080">></span><span>
</span><span> </span><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">div</span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">class</span><span class="token" style="color:#d4d4d4">=</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#ce9178">col-md-6</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#808080">></span><span>Column 1</span><span class="token" style="color:#808080"></</span><span class="token" style="color:#569cd6">div</span><span class="token" style="color:#808080">></span><span>
</span><span> </span><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">div</span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">class</span><span class="token" style="color:#d4d4d4">=</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#ce9178">col-md-6</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#808080">></span><span>Column 2</span><span class="token" style="color:#808080"></</span><span class="token" style="color:#569cd6">div</span><span class="token" style="color:#808080">></span><span>
</span><span> </span><span class="token" style="color:#808080"></</span><span class="token" style="color:#569cd6">div</span><span class="token" style="color:#808080">></span><span>
</span><span></span><span class="token" style="color:#808080"></</span><span class="token" style="color:#569cd6">div</span><span class="token" style="color:#808080">></span></code></div></pre>
<hr />
<h2 class="text-2xl font-bold mt-6 mb-4">6. <strong>Breakpoint Phổ Biến</strong></h2>
<p class="mb-4">Dưới đây là các breakpoint thường được sử dụng:</p>
<table>
<thead>
<tr>
<th>Thiết bị</th>
<th>Kích thước</th>
<th>Media Query Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>Điện thoại nhỏ</td>
<td>< 576px</td>
<td><code class="bg-gray-100 rounded px-1 py-0.5">@media (max-width: 575.98px)</code></td>
</tr>
<tr>
<td>Điện thoại lớn</td>
<td>576px - 767px</td>
<td><code class="bg-gray-100 rounded px-1 py-0.5">@media (min-width: 576px)</code></td>
</tr>
<tr>
<td>Máy tính bảng</td>
<td>768px - 991px</td>
<td><code class="bg-gray-100 rounded px-1 py-0.5">@media (min-width: 768px)</code></td>
</tr>
<tr>
<td>Laptop nhỏ</td>
<td>992px - 1199px</td>
<td><code class="bg-gray-100 rounded px-1 py-0.5">@media (min-width: 992px)</code></td>
</tr>
<tr>
<td>Desktop</td>
<td>>= 1200px</td>
<td><code class="bg-gray-100 rounded px-1 py-0.5">@media (min-width: 1200px)</code></td>
</tr>
</tbody>
</table>
<hr />
<h2 class="text-2xl font-bold mt-6 mb-4">7. <strong>Meta Tag cho Responsive</strong></h2>
<p class="mb-4">Đảm bảo website hiển thị đúng trên thiết bị di động bằng cách thêm meta tag sau trong
<code class="bg-gray-100 rounded px-1 py-0.5"><head></code>:
</p>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-html" style="white-space:pre;color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">meta</span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">name</span><span class="token" style="color:#d4d4d4">=</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#ce9178">viewport</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">content</span><span class="token" style="color:#d4d4d4">=</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#ce9178">width=device-width, initial-scale=1.0</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#808080">></span></code></div></pre>
<hr />
<h2 class="text-2xl font-bold mt-6 mb-4">8. <strong>Kiểm tra Responsive</strong></h2>
<p class="mb-4">Sử dụng các công cụ:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><strong>Chrome DevTools</strong>: (Ctrl + Shift + I) > Tab
<strong>Responsive</strong>.
</li>
<li class="mb-1"><strong>Responsive Design Mode</strong> trong Firefox.</li>
<li class="mb-1"><strong>Online Tools</strong>: <a class="text-blue-600 hover:underline"
href="https://www.responsinator.com">Responsinator</a>, <a
class="text-blue-600 hover:underline" href="https://screenfly.org">Screenfly</a>.</li>
</ul>
<hr />
<h2 class="text-2xl font-bold mt-6 mb-4">9. <strong>Kết hợp JavaScript (nếu cần)</strong></h2>
<p class="mb-4">JavaScript có thể được dùng để xử lý các tình huống đặc biệt:</p>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-javascript" style="white-space:pre;color:#9cdcfe;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#c586c0">if</span><span> </span><span class="token" style="color:#d4d4d4">(</span><span class="token dom" style="color:#9cdcfe">window</span><span class="token" style="color:#d4d4d4">.</span><span class="token property-access">innerWidth</span><span> </span><span class="token" style="color:#d4d4d4"><</span><span> </span><span class="token" style="color:#b5cea8">768</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token dom" style="color:#9cdcfe">document</span><span class="token" style="color:#d4d4d4">.</span><span class="token property-access">body</span><span class="token" style="color:#d4d4d4">.</span><span class="token property-access">style</span><span class="token" style="color:#d4d4d4">.</span><span class="token property-access">backgroundColor</span><span> </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#ce9178">"lightblue"</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<hr />
<h3 class="text-xl font-bold mt-5 mb-3">Lời khuyên</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><strong>Mobile-first</strong>: Thiết kế từ màn hình nhỏ trước, sau đó mở rộng với
<code class="bg-gray-100 rounded px-1 py-0.5">min-width</code>.
</li>
<li class="mb-1"><strong>Kiểm tra trên nhiều thiết bị</strong>: Đảm bảo trải nghiệm nhất quán.</li>
</ul>
</div>
</article>
<footer class="mt-8 border-t pt-4">
<p class="text-center text-gray-500">© 2024 SFIT | <a target="_blank" rel="noopener noreferrer"
href="https://github.com/zunohoang">zunohoang</a>. All rights reserved.</p>
</footer>
</main><!--$--><!--/$-->
<script src="/_next/static/chunks/webpack-457dc077475af9ee.js" async=""></script>
<script>(self.__next_f = self.__next_f || []).push([0])</script>
<script>self.__next_f.push([1, "4:\"$Sreact.fragment\"\n5:I[15244,[],\"\"]\n6:I[43866,[],\"\"]\n7:I[96641,[\"177\",\"static/chunks/app/layout-40e71d42d3ccdee8.js\"],\"Analytics\"]\n9:I[86213,[],\"OutletBoundary\"]\nb:I[86213,[],\"MetadataBoundary\"]\nd:I[86213,[],\"ViewportBoundary\"]\nf:I[34835,[],\"\"]\n1:HL[\"/_next/static/media/4473ecc91f70f139-s.p.woff\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff\"}]\n2:HL[\"/_next/static/media/463dafcda517f24f-s.p.woff\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff\"}]\n3:HL[\"/_next/static/css/e503160baa2cd0f0.css\",\"style\"]\n"])</script>
<script>self.__next_f.push([1, "0:{\"P\":null,\"b\":\"wpuafLjPzZSt3xkV7rnb4\",\"p\":\"\",\"c\":[\"\",\"docs\",\"6758037bb58e0293534ab92f\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"docs\",{\"children\":[[\"id\",\"6758037bb58e0293534ab92f\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$4\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/e503160baa2cd0f0.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[null,[\"$\",\"body\",null,{\"className\":\"__variable_1e4310 __variable_c3aa02 antialiased\",\"children\":[[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}],[\"$\",\"$L7\",null,{}]]}]]}]]}],{\"children\":[\"docs\",[\"$\",\"$4\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"docs\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]]}],{\"children\":[[\"id\",\"6758037bb58e0293534ab92f\",\"d\"],[\"$\",\"$4\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"docs\",\"children\",\"$0:f:0:1:2:children:2:children:0\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$4\",\"c\",{\"children\":[\"$L8\",null,[\"$\",\"$L9\",null,{\"children\":\"$La\"}]]}],{},null]},null]},null]},null],[\"$\",\"$4\",\"h\",{\"children\":[null,[\"$\",\"$4\",\"dGerlPdr9GqvDbNl2i3sK\",{\"children\":[[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\"}]]}]]}]]],\"m\":\"$undefined\",\"G\":[\"$f\",\"$undefined\"],\"s\":false,\"S\":false}\n"])</script>
<script>self.__next_f.push([1, "e:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script>
<script>self.__next_f.push([1, "10:I[48073,[\"839\",\"static/chunks/839-150b5850706a66a5.js\",\"664\",\"static/chunks/664-604679c007c3b6d5.js\",\"642\",\"static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js\"],\"default\"]\n12:I[44839,[\"839\",\"static/chunks/839-150b5850706a66a5.js\",\"664\",\"static/chunks/664-604679c007c3b6d5.js\",\"642\",\"static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js\"],\"\"]\n11:T1095,"])</script>
<script>self.__next_f.push([1, "# Responsive Design trong CSS\n\nResponsive Design giúp website hiển thị tốt trên các thiết bị có kích thước màn hình khác nhau. Dưới đây là tổng hợp các kỹ thuật và công cụ trong CSS để làm responsive.\n\n---\n\n## 1. **Sử dụng Media Queries**\nMedia Queries cho phép áp dụng CSS dựa trên kích thước màn hình hoặc các đặc điểm thiết bị khác.\n\n### Cú pháp:\n```css\n@media (điều kiện) {\n /* CSS áp dụng khi điều kiện đúng */\n}\n```\n\n### Ví dụ:\n```css\n/* Màn hình nhỏ hơn 768px */\n@media (max-width: 768px) {\n body {\n font-size: 14px;\n }\n}\n\n/* Màn hình lớn hơn hoặc bằng 1024px */\n@media (min-width: 1024px) {\n body {\n font-size: 18px;\n }\n}\n```\n\n---\n\n## 2. **Sử dụng Grid và Flexbox**\nGrid và Flexbox giúp tạo layout linh hoạt, dễ dàng điều chỉnh trên các kích thước màn hình khác nhau.\n\n### Ví dụ với Flexbox:\n```css\n.container {\n display: flex;\n flex-wrap: wrap; /* Tự động xuống dòng khi không đủ không gian */\n}\n\n.item {\n flex: 1 1 200px; /* Chiều rộng tối thiểu là 200px */\n}\n```\n\n### Ví dụ với CSS Grid:\n```css\n.container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 16px;\n}\n```\n\n---\n\n## 3. **Đơn vị linh hoạt**\nSử dụng các đơn vị như `%`, `em`, `rem`, `vh`, `vw` thay vì `px` để layout linh hoạt hơn.\n\n### Ví dụ:\n```css\n/* Sử dụng % */\n.container {\n width: 100%; /* Chiếm toàn bộ chiều rộng */\n}\n\n/* Sử dụng vh và vw */\n.hero {\n height: 100vh; /* Chiều cao bằng 100% chiều cao màn hình */\n}\n\n/* Sử dụng rem */\nbody {\n font-size: 1rem; /* Tương đương font-size của phần tử root */\n}\n```\n\n---\n\n## 4. **Hình ảnh và Video Responsive**\n### Hình ảnh\nSử dụng thuộc tính `max-width` để đảm bảo hình ảnh không vượt quá kích thước container:\n```css\nimg {\n max-width: 100%;\n height: auto;\n}\n```\n\n### Video\nSử dụng tỷ lệ khung hình:\n```css\n.video-container {\n position: relative;\n padding-top: 56.25%; /* 16:9 Aspect Ratio */\n}\n\n.video-container iframe {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n```\n\n---\n\n## 5. **CSS Frameworks**\nSử dụng framework như **Bootstrap**, **TailwindCSS** để tiết kiệm thời gian và hỗ trợ responsive dễ dàng.\n\n### Ví dụ với Bootstrap:\n```html\n\u003cdiv class=\"container\"\u003e\n \u003cdiv class=\"row\"\u003e\n \u003cdiv class=\"col-md-6\"\u003eColumn 1\u003c/div\u003e\n \u003cdiv class=\"col-md-6\"\u003eColumn 2\u003c/div\u003e\n \u003c/div\u003e\n\u003c/div\u003e\n```\n\n---\n\n## 6. **Breakpoint Phổ Biến**\nDưới đây là các breakpoint thường được sử dụng:\n| Thiết bị | Kích thước | Media Query Example |\n|------------------|------------------|-----------------------------------|\n| Điện thoại nhỏ | \u003c 576px | `@media (max-width: 575.98px)` |\n| Điện thoại lớn | 576px - 767px | `@media (min-width: 576px)` |\n| Máy tính bảng | 768px - 991px | `@media (min-width: 768px)` |\n| Laptop nhỏ | 992px - 1199px | `@media (min-width: 992px)` |\n| Desktop | \u003e= 1200px | `@media (min-width: 1200px)` |\n\n---\n\n## 7. **Meta Tag cho Responsive**\nĐảm bảo website hiển thị đúng trên thiết bị di động bằng cách thêm meta tag sau trong `\u003chead\u003e`:\n```html\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n```\n\n---\n\n## 8. **Kiểm tra Responsive**\nSử dụng các công cụ:\n- **Chrome DevTools**: (Ctrl + Shift + I) \u003e Tab **Responsive**.\n- **Responsive Design Mode** trong Firefox.\n- **Online Tools**: [Responsinator](https://www.responsinator.com), [Screenfly](https://screenfly.org).\n\n---\n\n## 9. **Kết hợp JavaScript (nếu cần)**\nJavaScript có thể được dùng để xử lý các tình huống đặc biệt:\n```javascript\nif (window.innerWidth \u003c 768) {\n document.body.style.backgroundColor = \"lightblue\";\n}\n```\n\n---\n\n### Lời khuyên\n- **Mobile-first**: Thiết kế từ màn hình nhỏ trước, sau đó mở rộng với `min-width`.\n- **Kiểm tra trên nhiều thiết bị**: Đảm bảo trải nghiệm nhất quán."])</script>
<script>self.__next_f.push([1, "8:[\"$\",\"main\",null,{\"className\":\"container mx-auto px-4 pt-2 py-8\",\"children\":[[\"$\",\"header\",null,{\"className\":\"mb-3 border-b-[1px] py-5 border-gray-300 flex justify-between\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-3xl font-bold\",\"children\":\"Tài liệu HTML,CSS,JS - Responsive Design\"}],[\"$\",\"p\",null,{\"className\":\"text-gray-600\",\"children\":[\"Đăng bởi \",[\"$\",\"i\",null,{\"children\":\"zunohoang\"}],\" vào \",[\"$\",\"time\",null,{\"dateTime\":\"2024-12-10T09:01:47.295Z\",\"children\":\"12/10/2024\"}]]}]]}],[\"$\",\"p\",null,{\"children\":[\"👁️ \",32,\" lượt xem\"]}]]}],[\"$\",\"article\",null,{\"children\":[\"$\",\"$L10\",null,{\"content\":\"$11\"}]}],[\"$\",\"footer\",null,{\"className\":\"mt-8 border-t pt-4\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-center text-gray-500\",\"children\":[\"© 2024 SFIT | \",[\"$\",\"$L12\",null,{\"href\":\"https://github.com/zunohoang\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"zunohoang\"}],\". All rights reserved.\"]}]}]]}]\n"])</script>
<script>self.__next_f.push([1, "c:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"1\",{\"children\":\"Tài liệu HTML,CSS,JS - Responsive Design\"}],[\"$\",\"meta\",\"2\",{\"name\":\"description\",\"content\":\"# Responsive Design trong CSS\\n\\nResponsive Design giúp website hiển thị tốt trên các thiết bị có kích thước màn hình khác nhau. Dưới đây là tổng hợp các kỹ thuật...\"}],[\"$\",\"meta\",\"3\",{\"property\":\"og:title\",\"content\":\"Tài liệu HTML,CSS,JS - Responsive Design\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:description\",\"content\":\"# Responsive Design trong CSS\\n\\nResponsive Design giúp website hiển thị tốt trên các thiết bị có kích thước màn hình khác nhau. Dưới đây là tổng hợp các kỹ thuật...\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:image\",\"content\":\"https://study.sfit.com.vn/bgclb.jpg\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:image:alt\",\"content\":\"Tài liệu HTML,CSS,JS - Responsive Design\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"8\",{\"property\":\"article:published_time\",\"content\":\"2024-12-10T09:01:47.295Z\"}],[\"$\",\"meta\",\"9\",{\"property\":\"article:author\",\"content\":\"zunohoang\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:title\",\"content\":\"Tài liệu HTML,CSS,JS - Responsive Design\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:description\",\"content\":\"# Responsive Design trong CSS\\n\\nResponsive Design giúp website hiển thị tốt trên các thiết bị có kích thước màn hình khác nhau. Dưới đây là tổng hợp các kỹ thuật...\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:image\",\"content\":\"https://study.sfit.com.vn/bgclb.jpg\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:image:alt\",\"content\":\"Tài liệu HTML,CSS,JS - Responsive Design\"}]]\na:null\n"])</script>
</body>
</html>