3 trang 3 lượt tải

Thiết kế Responsive Web với Media Queries Môn Thiết kế và xây dựng website | Trường Cao đẳng Công Nghệ Bách Khoa Hà Nội

5

Thiết kế Responsive Web với Media Queries Môn Thiết kế và xây dựng website. Tài liệu được sưu tầm gồm 3 trang, giúp bạn ôn tập tốt hơn. Mời các bạn đón xem. 

Môn: Thiết kế và xây dựng website 4 tài liệu

Trường: Trường Cao đẳng Công Nghệ Bách Khoa Hà Nội 101 tài liệu

Tác giả:

Profile

Linh Giang

5 ngày trước
Danh sách Quiz
/3
lOMoARcPSD| 58675420
lOMoARcPSD| 58675420
Bài thực hành
Thiết kế giao diện website responsive với Media
Queries
Họ và tên: Nguyễn Văn A
MSSV: 123456
Ngày: 26/9/2023
I. Giới thiệu Media Queries
Media Queries là kỹ thuật CSS cho phép thiết lập các điều kiện để áp dụng CSS dựa trên
thuộc nh ca thit bị hiển thị như kích thước màn hình, độ phân giải, hướng xoay màn hình,...
Sử dụng Media Queries giúp thiết kế giao diện website responsive, tự động thay đổi layout cho phù
hợp với kích thước màn hình.
II. Cú pháp Media Queries
@media <<media-type>> and (<<media-feature-rule>>) {
// CSS rules
}
<<media-type>> : kiểu thiết bị ( screen , print ,...)
<<media-feature-rule>> : điều kiện áp dụng ( width , height , orientaon ,...) Ví dụ:
@media screen and (max-width: 600px) { // CSS cho
màn hình <= 600px }
@media print {
// CSS cho khi in n
}
lOMoARcPSD| 58675420
III. Thiết kế giao diện responsive
1. Xác định breakpoint (điểm ngắt) cho từng kích thước màn hình
Màn hình lớn: >= 1200px
Màn hình vừa: >= 992px và < 1200px
Màn hình nhỏ: >= 768px và < 992px
Màn hình siêu nhỏ: < 768px
2. Thiết kế mobile-first
Mobile: Thiết kế cho màn hình nhỏ trước
Tablet: Mở rộng thiết kế cho các màn hình trung bình
Desktop: Mở rộng thiết kế cho các màn hình lớn hơn
3. Sử dụng Media Queries để nhúng CSS cho từng breakpoint
@media (min-width: 768px) {
// CSS cho màn hình >= 768px }
@media (min-width: 992px) {
// CSS cho màn hình >= 992px }
@media (min-width: 1200px) {
// CSS cho màn hình >= 1200px
}
4. Một số CSS có thể áp dụng để thiết kế responsive:
Sử dụng % , vh , vw thay vì px để kích thước linh hoạt theo kích thước màn hình
Dùng exbox và grid system để xếp layout
Ẩn/hiện các phần tử trên giao diện khi cần
Thay đổi font-size , padding , margin phù hợp với từng breakpoint
Sử dụng hình ảnh responsive với css width: 100% , max-width: 100%
DoD
1. Sinh viên thiết kế giao diện website với 3 breakpoint chính:
Mobile: < 768px
Tablet: ≥ 768px và < 992px
Desktop: ≥ 992px
2. Yêu cầu cụ thể cho layout ở mỗi breakpoint:
Mobile: 1 cột, menu điều hướng ở dạng Accordion
Tablet: 2 cột
Desktop: 3 cột, menu điều hướng hiển thị ngang
3. Sử dụng một số kỹ thuật để thiết kế responsive:
lOMoARcPSD| 58675420
Sử dụng exbox hoặc CSS Grid để xếp layout nhiều cột
Sử dụng các đơn vị % , vw , vh cho font-size , width ,...
Thiết lập max-width cho các block content
Media queries để ẩn/hiện các element khi cần
4. Tham khảo các mẫu giao diện cho từng breakpoint ở mục Tài liệu tham kho
5. Demo trang web responsive và nộp code kèm theo
Tài liệu tham khảo
Responsive Web Design - Media Queries, https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Tài liệu khác của Trường Cao đẳng Công Nghệ Bách Khoa Hà Nội

Preview text:

lOMoAR cPSD| 58675420 lOMoAR cPSD| 58675420 Bài thực hành
Thiết kế giao diện website responsive với Media Queries
Họ và tên: Nguyễn Văn A MSSV: 123456 Ngày: 26/9/2023
I. Giới thiệu Media Queries
Media Queries là kỹ thuật CSS cho phép thiết lập các điều kiện để áp dụng CSS dựa trên
thuộc tính của thiết bị hiển thị như kích thước màn hình, độ phân giải, hướng xoay màn hình,...
Sử dụng Media Queries giúp thiết kế giao diện website responsive, tự động thay đổi layout cho phù
hợp với kích thước màn hình.
II. Cú pháp Media Queries
@media <> and (<>) { // CSS rules }
<> : kiểu thiết bị ( screen , print ,...)
<> : điều kiện áp dụng ( width , height , orientation ,...) Ví dụ:
@media screen and (max-width: 600px) { // CSS cho màn hình <= 600px } @media print { // CSS cho khi in ấn } lOMoAR cPSD| 58675420
III. Thiết kế giao diện responsive
1. Xác định breakpoint (điểm ngắt) cho từng kích thước màn hình
Màn hình lớn: >= 1200px
Màn hình vừa: >= 992px và < 1200px
Màn hình nhỏ: >= 768px và < 992px
Màn hình siêu nhỏ: < 768px 2. Thiết kế mobile-first
Mobile: Thiết kế cho màn hình nhỏ trước
Tablet: Mở rộng thiết kế cho các màn hình trung bình
Desktop: Mở rộng thiết kế cho các màn hình lớn hơn
3. Sử dụng Media Queries để nhúng CSS cho từng breakpoint @media (min-width: 768px) {
// CSS cho màn hình >= 768px } @media (min-width: 992px) {
// CSS cho màn hình >= 992px } @media (min-width: 1200px) {
// CSS cho màn hình >= 1200px }
4. Một số CSS có thể áp dụng để thiết kế responsive:
Sử dụng % , vh , vw thay vì px để kích thước linh hoạt theo kích thước màn hình
Dùng flexbox và grid system để xếp layout
Ẩn/hiện các phần tử trên giao diện khi cần
Thay đổi font-size , padding , margin phù hợp với từng breakpoint
Sử dụng hình ảnh responsive với css width: 100% , max-width: 100% DoD
1. Sinh viên thiết kế giao diện website với 3 breakpoint chính: Mobile: < 768px
Tablet: ≥ 768px và < 992px Desktop: ≥ 992px
2. Yêu cầu cụ thể cho layout ở mỗi breakpoint:
Mobile: 1 cột, menu điều hướng ở dạng Accordion Tablet: 2 cột
Desktop: 3 cột, menu điều hướng hiển thị ngang
3. Sử dụng một số kỹ thuật để thiết kế responsive: lOMoAR cPSD| 58675420
Sử dụng flexbox hoặc CSS Grid để xếp layout nhiều cột
Sử dụng các đơn vị % , vw , vh cho font-size , width ,...
Thiết lập max-width cho các block content
Media queries để ẩn/hiện các element khi cần
4. Tham khảo các mẫu giao diện cho từng breakpoint ở mục Tài liệu tham khảo
5. Demo trang web responsive và nộp code kèm theo
Tài liệu tham khảo
Responsive Web Design - Media Queries, https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Tài liệu liên quan: