1.1 Cách tiếp cận Mobile-First
Responsive design là một cách tiếp cận trong phát triển web, giúp cho các trang web tự động điều chỉnh để phù hợp với các kích thước màn hình và thiết bị khác nhau, mang lại trải nghiệm sử dụng tốt nhất. Mục tiêu chính của responsive design là làm cho trang web trở nên tiện dụng và có thể truy cập được đối với tất cả người dùng bất kể họ sử dụng thiết bị nào.
Cách tiếp cận Mobile-First nghĩa là bắt đầu phát triển từ thiết kế cho các thiết bị di động với màn hình nhỏ, sau đó mở rộng ra các màn hình lớn hơn. Phương pháp này giúp tập trung vào những thành phần và chức năng quan trọng nhất của trang web.
Lợi ích của cách tiếp cận Mobile-First:
- Tối ưu hóa nội dung cho người dùng di động
- Đơn giản hóa thiết kế và chức năng cho các màn hình nhỏ
- Cải thiện hiệu năng bằng cách giảm lượng nội dung
Ví dụ:
/* Các kiểu cơ bản cho thiết bị di động */
body {
font-size: 16px;
margin: 0;
padding: 0;
}
/* Các kiểu cho màn hình lớn hơn */
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
1.2 Progressive Enhancement
Progressive enhancement tập trung vào việc cung cấp chức năng cơ bản cho tất cả người dùng, sau đó thêm vào các cải tiến cho những trình duyệt và thiết bị mạnh hơn. Đây là một cách tiếp cận đảm bảo tính khả dụng của nội dung, ngay cả khi một số chức năng hoặc kiểu dáng không được thiết bị của người dùng hỗ trợ.
Lợi ích của Progressive Enhancement:
- Đảm bảo chức năng cơ bản cho tất cả người dùng
- Cải thiện trải nghiệm người dùng cho những ai có thiết bị hiện đại hơn
- Giảm nguy cơ mất nội dung hoặc chức năng
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progressive Enhancement</title>
<style>
/* Các kiểu cơ bản cho tất cả các trình duyệt */
body {
font-family: Arial, sans-serif;
}
/* Các kiểu nâng cao cho trình duyệt hiện đại */
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div>Nội dung 1</div>
<div>Nội dung 2</div>
</div>
</body>
</html>
1.3 Linh hoạt của bố cục (Fluid Layouts)
Linh hoạt của bố cục có nghĩa là sử dụng các phần tử linh hoạt, có thể thích ứng với các kích thước màn hình khác nhau. Điều này có thể bao gồm việc sử dụng các container linh hoạt, tự động thay đổi kích thước tùy thuộc vào kích thước màn hình.
Lợi ích của linh hoạt bố cục:
- Cải thiện hiển thị nội dung trên nhiều thiết bị
- Thích ứng tốt hơn với các thay đổi kích thước màn hình
- Tăng tiện lợi sử dụng và khả năng truy cập nội dung
Ví dụ:
<div class="container">
<div class="item-1">Content item 1</div>
<div class="item-2">
Etiam scelerisque lectus nulla, eget convallis orci convallis vel. Etiam sed interdum sem. Nunc vestibulum lectus nibh, in volutpat velit fermentum eget. Mauris in risus tincidunt, sodales odio et, rutrum ligula. In iaculis congue ex in laoreet. Sed id eros porttitor, finibus diam ultrices, consectetur leo. Fusce aliquam, nibh ac sollicitudin viverra, felis libero fringilla orci, nec auctor elit sapien non arcu. Proin dolor mi, iaculis ut velit id, vestibulum consectetur metus. Duis venenatis felis a diam elementum, eget ullamcorper leo scelerisque. Sed tempus euismod urna et tristique. Duis at odio quis libero commodo ullamcorper id vel odio. Maecenas volutpat rhoncus sodales. Mauris eget nunc accumsan, rhoncus massa at, placerat lorem.
Etiam ullamcorper elementum tellus non euismod. Mauris euismod mi nisi, sed egestas ligula varius sed. Nunc tortor elit, hendrerit sed gravida in, tempus nec augue. Aliquam vitae condimentum velit. Sed id massa ac felis tempor elementum. Aenean at nulla ipsum. Fusce sed cursus tortor. Duis sodales rhoncus eros, non aliquam ante ultricies ut. Pellentesque auctor ultricies aliquet. In laoreet enim dolor, vel consectetur sapien laoreet eu.
In efficitur pharetra ex convallis egestas. Praesent egestas, sapien fermentum consectetur vestibulum, quam dui pharetra urna, vitae finibus arcu lacus quis mauris. Quisque consectetur lorem sapien, nec pulvinar elit varius vitae. Cras elementum risus lacus, a interdum tellus euismod ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas pharetra, odio vel facilisis venenatis, ipsum leo viverra ligula, ut venenatis enim ipsum ut lectus. Fusce cursus mollis congue.
</div>
</div>
.container {
width: 100%;
padding: 20px;
box-sizing: border-box;
color: white;
}
.item-1 {
min-height: 50px;
width: calc(100% / 3);
float: left;
background: purple;
}
.item-2 {
background: gray;
}
1.4 Thứ bậc nội dung (Content Hierarchy)
Thứ bậc nội dung quan trọng đối với responsive design vì nó giúp tổ chức thông tin sao cho dễ truy cập và dễ hiểu trên bất kỳ thiết bị nào. Điều này bao gồm việc sử dụng đúng các tiêu đề, đoạn văn, danh sách và các phần tử khác để tạo nên một cấu trúc rõ ràng và logic.
Lợi ích của thứ bậc nội dung:
- Cải thiện khả năng đọc và tiếp thu thông tin
- Gia tăng khả năng truy cập nội dung cho tất cả người dùng
- Dễ dàng điều hướng và tương tác với trang web
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thứ bậc nội dung</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
p {
font-size: 1em;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Tiêu đề chính</h1>
<h2>Tiêu đề phụ</h2>
<p>
Đây là ví dụ về một đoạn văn bản theo sau tiêu đề phụ. Văn bản nên dễ đọc và dễ hiểu đối với tất cả người dùng.
</p>
</body>
</html>
GO TO FULL VERSION