CSS RWD - Giới thiệu
Chào mừng các bạn đang học lập trình web! Hôm nay, chúng ta sẽ bước vào thế giới thú vị của Thiết kế Web T响应 (RWD) bằng CSS. Là giáo viên máy tính gần gũi của bạn, tôi rất vui được hướng dẫn các bạn trong hành trình này. Hãy bắt đầu nào!
Thiết kế Web T响应 là gì?
Hãy tưởng tượng bạn đang xây dựng một ngôi nhà cần phù hợp với nhiều kích thước khác nhau của mảnh đất. Đó chính là điều mà RWD làm cho các trang web! Đây là một phương pháp thiết kế web giúp các trang web trông đẹp trên tất cả các thiết bị và kích thước màn hình.
Trước đây, chúng ta thường tạo ra các trang web riêng biệt cho máy tính để bàn và di động. Đó như việc xây dựng hai ngôi nhà thay vì một ngôi nhà có thể thích nghi. Nhưng với RWD, chúng ta có thể tạo ra một trang web duy nhất mà tự điều chỉnh để phù hợp với bất kỳ màn hình nào. Đúng là tuyệt vời phải không?
Tại sao RWD lại quan trọng?
Trong thế giới ngày nay, mọi người truy cập các trang web từ nhiều loại thiết bị khác nhau - điện thoại thông minh, máy tính bảng, máy tính xách tay, thậm chí là tủ lạnh thông minh! (Đúng vậy, đó là một điều!) Nếu trang web của bạn không trông đẹp trên tất cả các thiết bị này, bạn có thể mất đi khách truy cập nhanh hơn bạn có thể nói "thiết kế không响应."
Cấu trúc RWD
Cấu trúc của RWD bao gồm ba thành phần chính:
- Bố cục linh hoạt
- Ảnh và phương tiện linh hoạt
- Câu lệnh media query của CSS
Hãy cùng phân tích từng phần một.
1. Bố cục linh hoạt
Bố cục linh hoạt giống như những sợi dây cao su - chúng giãn và co lại để phù hợp với các kích thước màn hình khác nhau. Chúng ta đạt được điều này bằng cách sử dụng các đơn vị tương đối như phần trăm thay vì các đơn vị cố định như pixel.
Dưới đây là một ví dụ đơn giản:
.container {
width: 80%;
margin: 0 auto;
}Trong đoạn mã này, container sẽ luôn chiếm 80% chiều rộng của phần tử cha, bất kể kích thước màn hình. Nó giống như một căn phòng luôn chiếm 80% ngôi nhà, dù đó là một dinh thự hay một ngôi nhà nhỏ!
2. Ảnh và phương tiện linh hoạt
Chúng ta muốn các ảnh và video của mình linh hoạt như bố cục. Dưới đây là cách chúng ta làm cho ảnh linh hoạt:
img {
max-width: 100%;
height: auto;
}CSS này告诉浏览器, "Nè, đảm bảo rằng ảnh này không bao giờ rộng hơn container của nó, và điều chỉnh chiều cao để giữ nguyên tỷ lệ khung hình." Nó giống như một bức ảnh có thể tự động thay đổi kích thước để phù hợp với bất kỳ khung ảnh nào!
3. Câu lệnh media query của CSS
Media query là thành phần bí mật của RWD. Chúng cho phép chúng ta áp dụng các phong cách khác nhau dựa trên các đặc điểm của thiết bị, phổ biến nhất là chiều rộng của viewport.
Dưới đây là một media query cơ bản:
@media screen and (max-width: 600px) {
.container {
width: 100%;
}
}Đoạn mã này nói, "Nếu chiều rộng màn hình là 600 pixel hoặc ít hơn, hãy làm cho container chiếm toàn bộ chiều rộng." Nó giống như một căn phòng mở rộng để lấp đầy toàn bộ ngôi nhà khi ngôi nhà nhỏ hơn!
Kết hợp tất cả lại với nhau
Bây giờ, hãy xem các thành phần này làm việc cùng nhau trong một bố cục响应 đơn giản:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web Design Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
}
.header {
background-color: #f0f0f0;
padding: 20px;
}
.content {
display: flex;
flex-wrap: wrap;
}
.main {
flex: 2;
padding: 20px;
}
.sidebar {
flex: 1;
background-color: #e0e0e0;
padding: 20px;
}
img {
max-width: 100%;
height: auto;
}
@media screen and (max-width: 600px) {
.container {
width: 100%;
}
.content {
flex-direction: column;
}
.sidebar {
order: -1;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Welcome to My Responsive Site</h1>
</div>
<div class="content">
<div class="main">
<h2>Main Content</h2>
<p>This is the main content area. It will be wider on larger screens.</p>
<img src="https://via.placeholder.com/600x300" alt="Placeholder Image">
</div>
<div class="sidebar">
<h2>Sidebar</h2>
<p>This is the sidebar. On small screens, it will appear above the main content.</p>
</div>
</div>
</div>
</body>
</html>Trong ví dụ này, chúng ta đã tạo ra một bố cục响应 đơn giản với một header, phần nội dung chính và cột bên. Bố cục điều chỉnh dựa trên kích thước màn hình:
- Trên màn hình lớn hơn, phần nội dung chính và cột bên nằm bên cạnh nhau.
- Trên màn hình nhỏ hơn (600px hoặc ít hơn), cột bên di chuyển lên trên phần nội dung chính, và container chiếm toàn bộ chiều rộng của màn hình.
Hãy thử thay đổi kích thước cửa sổ trình duyệt của bạn để xem cách nó phản hồi!
Kết luận
Và thế là bạn đã có nó, các bạn! Bạn vừa bước ra thế giới Thiết kế Web T响应. Hãy nhớ, việc tạo ra các trang web响应 là như làm một giáo viên yoga trên web - tất cả đều về sự linh hoạt!
Trong hành trình tiếp theo của bạn, bạn sẽ khám phá nhiều kỹ thuật và công cụ tiên tiến hơn. Nhưng hiện tại, hãy tập luyện với những基础知识 này, thử nghiệm với các bố cục khác nhau, và quan trọng nhất, hãy vui vẻ!
Chúc các bạn may mắn và các trang web của bạn luôn响应!
Credits: Image by storyset