Tổng quan về thiết kế đáp ứng trong CSS
Bài viết này giải thích tổng quan về thiết kế đáp ứng trong CSS.
Chúng tôi sẽ trình bày tổng quan về khái niệm cơ bản của thiết kế đáp ứng và vai trò của CSS trong việc thực hiện nó.
YouTube Video
HTML để Xem trước
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>Tổng quan về thiết kế đáp ứng trong CSS
Trong CSS, thiết kế đáp ứng là một kỹ thuật để hiển thị bố cục và nội dung của trang web một cách phù hợp trên nhiều thiết bị và kích thước màn hình, chẳng hạn như điện thoại thông minh, máy tính bảng và máy tính để bàn. Để đạt được thiết kế đáp ứng, chủ yếu sử dụng các kỹ thuật và phương pháp sau.
Truy vấn 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}Truy vấn Media là một tính năng cho phép bạn áp dụng các quy tắc CSS khác nhau dựa trên chiều rộng, chiều cao, độ phân giải của thiết bị và các yếu tố khác. Điều này cho phép áp dụng các kiểu khác nhau tùy thuộc vào kích thước màn hình.
Trong ví dụ này, màu nền thay đổi theo chiều rộng màn hình.
Bố cục linh hoạt
1.container {
2 width: 80%; /* 80% width relative to the parent element */
3 margin: 0 auto; /* Center the element */
4}Trong thiết kế đáp ứng, chiều rộng và chiều cao của các phần tử được chỉ định bằng các đơn vị tương đối như phần trăm hoặc em thay vì giá trị pixel cụ thể. Điều này cho phép bố cục thay đổi linh hoạt theo kích thước màn hình.
Hình ảnh đáp ứng
1img {
2 max-width: 100%;
3 height: auto;
4}Hình ảnh cũng được đặt để thay đổi kích thước theo màn hình. Ví dụ, sử dụng max-width có thể điều chỉnh hình ảnh để chúng không vượt quá chiều rộng của phần tử cha.
Cài đặt chế độ hiển thị (Viewport)
1<meta name="viewport" content="width=device-width, initial-scale=1.0">Sử dụng thẻ <meta> trong HTML để đảm bảo trình duyệt diễn giải đúng chiều rộng màn hình của thiết bị. Nếu không có điều này, thiết kế đáp ứng sẽ không hoạt động đúng, đặc biệt là trên các thiết bị di động.
Sử dụng các framework CSS
Các framework CSS như Bootstrap và Tailwind CSS thường được sử dụng để đạt được thiết kế đáp ứng một cách hiệu quả. Các framework này được thiết kế để dễ dàng tạo ra bố cục đáp ứng bằng cách sử dụng các lớp được định nghĩa sẵn.
Ví dụ: Hệ thống lưới của 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>Trong ví dụ trên, khi chiều rộng màn hình là md (kích thước trung bình, thường là 768px trở lên), hai cột được sắp xếp cạnh nhau, nhưng trên các màn hình hẹp hơn, chúng được sắp xếp theo chiều dọc.
Flexbox và Bố cục Lưới
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}Sử dụng CSS flexbox hoặc grid cho phép điều chỉnh bố cục linh hoạt. Các kỹ thuật bố cục này rất phù hợp cho thiết kế đáp ứng vì chúng giúp dễ dàng điều chỉnh bố cục tự động theo kích thước màn hình.
Tóm tắt
Thiết kế đáp ứng là một phương pháp quan trọng để đảm bảo người dùng có thể truy cập thoải mái vào trang web bất kể thiết bị họ sử dụng. Bằng cách kết hợp media queries, bố cục linh hoạt, các framework, và các công nghệ bố cục mới như Flexbox và Grid, có thể tạo ra các trang web linh hoạt và thích ứng hơn.
Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.