BÀI GIẢNG PHÁT TRIỂN ỨNG DỤNG WEB
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 (3.14 MB, 73 trang )
Bài giảng
Phát triển ứng dụng web
Lê Đình Thanh
VNU-UET
Email:
Mobile: 0987.257.504
Website: />
1
RWD
Responsive Web Design
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 2
Thiết kế đáp ứng
Các thành phần đáp ứng
Bố cục/dàn trang (layout)
Văn bản (typography)
Hình ảnh (image)
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 3
Công nghệ cần thiết
Meta viewport
display
Positioning
Float
Flexbox
Grids
Conditional CSS
Responsive Images
Responsive Typography
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 4
CSS có điều kiện
media="truy_vấn_phương_tiện">
@media truy_vấn_phương_tiện {
Các bảng định dạng
}
@import url("file.css") truy_vấn_phương_tiện;
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
CSS có điều kiện
Cú pháp <truy_vấn_phương_tiện>:
[not|only]? <kiểu_phương_tiện> |
(<đặc_điểm_của_phương_tiện>) [and
(<đặc_điểm_của_phương_tiện>)]*
Ví dụ:
@media screen and (max-width: 500px) {
.gridmenu { width:100%; }
.gridmain { width:100%; }
.gridright { width:100%; }
}
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
CSS có điều kiện
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
CSS có điều kiện
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
CSS có điều kiện
• Điều kiện hỗ trợ
@supports <điều_kiện_hỗ_trợ> {
Các bảng định dạng
}
Ví dụ
@supports (display:flexbox) and (not (display:inline-grid))
{
div.box {display:flexbox;}
span {display:flexbox;}
}
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Dàn trang đáp ứng
Quan trọng nhất
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 10
Ví dụ 1
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 11
Ví dụ 1
Nếu khung nhìn lớn thì ba đối tượng trên cùng hàng
với tỷ lệ là 1:2:3
Nếu khung nhìn vừa thì HAI đối tượng đầu tiên trên
cùng hàng với tỷ lệ 1:2, đối tượng còn lại trên hàng
mới rộng 100%
Nếu khung nhìn hẹp thì mỗi đối tượng trên một
hàng với độ rộng 100%
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 12
Ví dụ 1 - Cấu trúc DOM
section
div
article
article
div
article
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 13
Ví dụ 1 - CSS
/* Khung nhìn lớn trước */
section, div {display:flex; }
div, article {flex:1}
article:nth-of-type(2) { flex: 2;}
/* Tiếp theo là trung bình */
@media (max-width:767px) {
section {display:block; }
}
/* Cuối cùng là nhỏ */
@media (max-width:600px) {
div { display:block; }
}
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 14
Ví dụ 1 - Hoàn thiện
Tham khảo
/> m
Chú ý thay đổi chiều rộng cửa sổ và quan sát
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 15
Bài thực hành
Tạo trang tương tự như trang sau, sử dụng flexbox để
layout
/> m
Chú ý thay đổi chiều rộng cửa sổ và quan sát
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 16
Ví dụ 2
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 17
Ví dụ 2
Lưới gồm 3 hàng, 4 cột
header: Toàn bộ hàng 1
aside: 1 ô bên trái hàng 2
article: 3 ô bên phải hàng 2
footer: hàng 3
nửa trái: 2 ô bên trái hàng 3
nửa phải: 2 ô bên phải hàng 3
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 18
Ví dụ 2 - DOM
.container
header
article
aside
footer
div
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 19
Ví dụ 2 - CSS
/* Khung nhìn lớn trước */
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
}
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 20
