bài tập tiểu luận responsive web design (RWD )
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1010.54 KB, 18 trang )
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
• Media Queries
Số lượng cột
Kích thước ảnh (phóng to, thu nhỏ)
Độ rộng của các thành phần
Khoảng cách giữa các thành phần
Kích thước chữ
…
Là những thứ cần được điều chỉnh để tránh làm vỡ cấu
trúc giao diện của website, phù hợp với kích thước từng
thiết bị.
Dùng để hiệu chỉnh kích thước ảnh để tránh làm vỡ
giao diện website
Dùng thuộc tính max-width của CSS để giới hạn kích
thước tối đa của hình ảnh
| img {max-width: 100%}
Kỹ thuật Responsive Images của Filament Group cho phép load ảnh mới
khi cần thay vì resize lại ảnh Giúp tiết kiệm việc load ảnh lớn không
cần thiết trên các kích thước trình duyệt nhỏ.
Tuy nhiên, hạn chế là phải có ảnh với nhiều kích thước khác nhau và
phải có thêm câu lệnh để điều khiển load ảnh.
Media Queries giúp website thay đổi bố cục theo kích
thước màn hình
Câu lệnh minh họa:
@media screen and (max-width: 1024px) {
#wrapper {width: 960px;}
#main-content {width: 600px; float: left;}
}
@media screen and (max-width: 800px) {
#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
tiếp tục cải thiện trong nhiều năm tới, nhưng bạn có thể áp
dụng nó ngay hôm nay cho những dự án mới.
Trước tiên, bạn hãy viết một trang web cơ bản, với đầy đủ các
thành phần
Và định dạng CSS cho trang web nhé
Ví dụ như :
Thẻ Meta Viewport là điều tất yếu trong flexiable layout,
được thêm vào trong thẻ <head> tại Source Code
Tag meta viewport thiết lập màn hình theo tỷ lệ 1×1, điều này sẽ loại
bỏ các chức năng mặc định từ các trình duyệt smartphone, chỉ hiển thị
vừa màn hình để xem và có thể phóng to bằng thao tác tay.
Sau đó, sử dụng CSS3 Media Query, với Viewport tùy
theo ý muốn của người lập trình, ví dụ:
Bạn có thể viết bao nhiêu Media Query tùy ý.
Bạn hãy viết thử và trải nghiệm trang web của mình nhé. Chúc thành công!
