bài tập tiểu luận responsive web design (RWD )

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 [...]... 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...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 ý:... 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... 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ẻ tại Source Code Tag meta viewport thiết lập màn hình theo tỷ... 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! . 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. 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à. ả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: