Nhóm 17:
1. Cao Thị Huế _K124060983
2. Lê Thị Diệu Ly _K124060997
3. Hàn Thị Thảo Ly _K124060998
4. Trần Mạnh Tường _K124061064
5. Trịnh Thị Ly Na _K124062299
6. Huỳnh Khôi Nguyên _K114061019
 Khái niệm RWD
 Các kỹ thuật của RWD
 Đánh giá RWD
 Demo
 Các thiết bị di động ngày càng ra đời với nhiều kích
thước khác nhau
 Nhu cầu sử dụng Web trên các thiết bị di động ngày
càng tăng
 Người dùng không thích sử dụng thanh cuộn ngang trên
trình duyệt
 Ngoài việc phải phát triển nhiều trang web cho mỗi
thiết với kích thước trình duyệt, liệu có giải pháp nào
khác không?
RWD bao gồm các kỹ thuật giúp phát triển website có
khả năng tự động thay đổi bố cục tương thích các kích thước
màn hình khác nhau.
Responsive Web có khả năng tự động thay đổi kích thước nội dung
và hình ảnh cho nhiều loại kích thước màn hình khác nhau để chắc chắn
rằng website đó được truy cập hiệu quả và dễ dàng trên bất kỳ thiết bị nào.
1
• Flexible Layout
2
• Flexible Images
3

#wrapper {width: 100%; padding: 0 2px;}
}
@media screen and (max-width: 600px) {
#main-content {width: 98%; clear: both;}
}
Lưu ý:
CSS trong các media queries cũng tuân theo thứ tự ưu tiên của CSS
 Tiết kiệm thời gian và chi phí cho việc phát triển
website
 Tối ưu hóa việc phát triển website, 1 bản web duy nhất
chạy trên nhiều thiết bị
 Thuận lợi trong việc làm SEO
 Tạo cho người dùng những trải nghiệm tốt nhất từ thiết
bị duyệt web của họ
RWD giúp thu gọn nội dung, ẩn bớt các thành phần,
thu nhỏ hình ảnh,… không có nghĩa là:
- Web sẽ tải nhanh hơn
- Dung lượng tải về sẽ nhỏ hơn
- Ít chiếm băng thông hơn
Thay vào đó, RWD lại phức tạp hơn, bởi nhà thiết kế
không nhắm vào một thiết bị cụ thể nào, nên trình
duyệt trên moblie cũng phải đảm đương lượng tập tin
HTML và CSS lớn, có khi làm cho việc duyệt web trên di
động bị chậm chạp hơn
Web design không đơn thuần là tạo ra sản phẩm
đẹp trong mắt người dùng mà còn là công việc tạo ra trải
nghiệm mới cho người dùng.
RWD nếu được implement tốt sẽ tăng trải nghiệm
người dùng nhưng không thể giải quyết cho tất cả mọi
người dùng mọi loại thiết bị, mọi nền tảng, nó sẽ còn được