HTML - Thiết kế Web T响应式
Xin chào các bạn nhà phát triển web đang học hỏi! Hôm nay, chúng ta sẽ cùng bước vào thế giới đầy thú vị của thiết kế web响应式. Là giáo viên máy tính gần gũi của bạn, tôi sẽ hướng dẫn bạn qua hành trình này, từng bước một. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau bắt đầu cuộc phiêu lưu này nhé!
什么是Responsive Web Design?
Trước khi chúng ta nhảy vào phần "làm thế nào", hãy hiểu phần "là gì" và "tại sao" của thiết kế web响应式. Hãy tưởng tượng bạn đang đọc một cuốn sách mà tự động điều chỉnh kích thước chữ tùy thuộc vào việc bạn đang cầm nó gần mặt hay ở xa. Đúng là rất tuyệt vời phải không? Đó chính xác là điều mà thiết kế web响应式 làm cho các trang web!
Thiết kế web响应式 là một phương pháp giúp các trang web hiển thị tốt trên nhiều thiết bị và kích thước cửa sổ hoặc màn hình khác nhau. Từ màn hình máy tính để bàn đến máy tính bảng và điện thoại di động, một thiết kế响应式 đảm bảo rằng trang web của bạn trông đẹp và hoạt động đúng cách ở mọi nơi.
Làm thế nào để tạo các trang web响应式?
Bây giờ chúng ta đã biết thiết kế响应式 là gì, hãy撸 lên áo và học cách tạo các trang web响应式. Có nhiều kỹ thuật chúng ta có thể sử dụng, nhưng chúng ta sẽ tập trung vào những kỹ thuật phổ biến và hiệu quả nhất.
1. Lưới 流体
Lưới 流体 sử dụng các đơn vị tương đối như phần trăm thay vì các đơn vị tuyệt đối như pixel. Điều này cho phép bố cục điều chỉnh dựa trên kích thước màn hình.
Dưới đây là một ví dụ đơn giản:
<div class="container">
<div class="column">Cột 1</div>
<div class="column">Cột 2</div>
<div class="column">Cột 3</div>
</div>.container {
width: 100%;
}
.column {
float: left;
width: 33.33%;
}Trong ví dụ này, mỗi cột sẽ luôn chiếm một phần ba-width của container, bất kể kích thước màn hình.
2. Ảnh 弹性
Các ảnh có thể được làm响应式 bằng cách thiết lập maximum width của chúng là 100% của phần tử chứa.
img {
max-width: 100%;
height: auto;
}Quy tắc CSS này đảm bảo rằng các ảnh sẽ thu nhỏ nếu phần tử chứa trở nhỏ hơn kích thước gốc của ảnh, nhưng sẽ không phóng to vượt quá kích thước gốc.
3. Truy vấn 媒体
Truy vấn 媒体 cho phép bạn áp dụng các样式 khác nhau cho các kích thước màn hình khác nhau. Chúng giống như các câu điều kiện cho CSS của bạn.
/* Styles for screens smaller than 600px */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}Truy vấn 媒体 này thay đổi bố cục thành một cột duy nhất khi chiều rộng màn hình là 600px hoặc nhỏ hơn.
Thiết lập viewport cho Thiết kế Web响应式
Bây giờ, hãy nói về một yếu tố quan trọng cho thiết kế响应式: viewport. Viewport là khu vực可见 của người dùng trên một trang web. Nó thay đổi tùy thuộc vào thiết bị - nó sẽ nhỏ hơn trên điện thoại di động so với màn hình máy tính.
Để thiết lập viewport, chúng ta sử dụng thẻ <meta> trong phần <head> của HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Dòng này告诉浏览器 để đặt-width của viewport bằng-width của thiết bị và đặt mức zoom ban đầu là 1.0 (không zoom).
Các thuộc tính của thẻ viewport
Thẻ viewport meta có một số thuộc tính cho phép chúng ta kiểm soát cách trang của chúng ta được hiển thị. Hãy xem chúng trong định dạng bảng:
| Thuộc tính | Giá trị | Mô tả |
|---|---|---|
| width | device-width hoặc một giá trị cụ thể | Đặt-width của viewport |
| height | device-height hoặc một giá trị cụ thể | Đặt-height của viewport |
| initial-scale | Một số介于 0.0 và 10.0 | Đặt mức zoom ban đầu |
| user-scalable | yes hoặc no | Cho phép hoặc không cho phép các hành động zoom vào/ra |
| minimum-scale | Một số介于 0.0 và 10.0 | Đặt mức zoom tối thiểu |
| maximum-scale | Một số介于 0.0 và 10.0 | Đặt mức zoom tối đa |
Ví dụ, nếu bạn muốn đặt một-width cụ thể và ngăn không cho người dùng zoom, bạn có thể sử dụng:
<meta name="viewport" content="width=500, user-scalable=no">Nhưng hãy nhớ, nói chung là tốt hơn để cho phép người dùng zoom vì lý do khả năng truy cập!
Ví dụ về các trang web响应式
Bây giờ chúng ta đã bao gồm các nguyên tắc cơ bản, hãy xem một ví dụ toàn diện hơn về một trang web响应式:
<!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: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.header {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
.content {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 1;
padding: 20px;
min-width: 200px;
}
@media screen and (max-width: 600px) {
.column {
flex: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Welcome to My Responsive Website</h1>
</div>
<div class="content">
<div class="column">
<h2>Column 1</h2>
<p>This is some content for the first column.</p>
</div>
<div class="column">
<h2>Column 2</h2>
<p>This is some content for the second column.</p>
</div>
<div class="column">
<h2>Column 3</h2>
<p>This is some content for the third column.</p>
</div>
</div>
</div>
</body>
</html>Trong ví dụ này, chúng ta đã tạo một trang web đơn giản với một header và ba cột. Các cột sẽ hiển thị bên cạnh nhau trên màn hình lớn hơn, nhưng sẽ chồng lên nhau theo chiều dọc trên màn hình nhỏ hơn 600px rộng.
Và thế là bạn đã bước vào thế giới của thiết kế web响应式! Hãy nhớ, thực hành làm cho hoàn hảo, vì vậy đừng sợ thử nghiệm với các kỹ thuật này. Trước khi bạn biết, bạn sẽ tạo ra các trang web đẹp và响应式 trông đẹp trên bất kỳ thiết bị nào!
Khi chúng ta kết thúc, tôi nhớ lại một học sinh tôi từng có, người rất sợ thiết kế响应式. Cô ấy nghĩ rằng đó là một loại ma thuật đen. Nhưng sau một vài bài học và rất nhiều bài tập, cô ấy đã tạo ra một trang web响应式 đẹp mắt và tìm được một công việc tốt! Vậy hãy tiếp tục, và ai biết đâu kỹ năng mới tìm thấy của bạn có thể đưa bạn đến đâu?
Chúc các bạn may mắn trong việc mã hóa! ?
Credits: Image by storyset