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
Trang 1Nhóm 17:
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
Trang 2 Khái niệm RWD
Các kỹ thuật của RWD
Đánh giá RWD
Trang 3 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?
Trang 4RWD 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
Trang 5Responsive 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.
Trang 61 • Flexible Layout
Trang 8Flexiable layout để điều chỉnh lại bố cục trang web
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ị
Trang 9Dù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%}
Trang 10Kỹ 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.
Trang 11 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
Trang 12 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ọ
Trang 13RWD 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
Trang 14Web 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
Trang 15Trướ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
Trang 16Và định dạng CSS cho trang web nhé
Ví dụ như :
Trang 17Thẻ 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.
Trang 18Sau đó, 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!