Bài tập lớn Nhập môn điện toán - Bài tập lớn 3: Tìm hiểu về Responsive Web Design - Nguyễn Xuân Trực
TRƯỜNG ĐẠI HỌC BÁCH KHOA - ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
KHOA KHOA HỌC VÀ KỸ THUẬT MÁY TÍNH
NHẬP MÔN ĐIỆN TOÁN
Bài tập lớn 3
Tìm hiểu về Responsive Web Design
Đặng Xuân Kiệt Cáp ([email protected].vn)
Thành viên: Nguyễn Xuân Trực - 1513804
Trương Minh Tâm - 1512936
Hồ Chí Minh, 01/2020
Trường Đại học Bách Khoa – Đại học Quốc Gia TP. Hồ Chí Minh
Khoa Khoa học và Kỹ thuật Máy tính
Mục lục
3
3
3
3
4
4
4
5
5
5
1.1 Đặt vấn đề . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.2 Responsive Web Desgin là gì? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.3 Lịch sử hình thành . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.4 Tầm quan trọng của Responsive Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.4.1 Đáp ứng nhu cầu thực tế . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.4.2 Hiệu quả kinh tế . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.5 Quy tắc khi thực hiện Responsive Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5
5
5
5
6
6
6
7
7
7
7
7
8
8
8
2.1 CSS3 Media Queries – Hỗ trợ các khung nhìn khác nhau . . . . . . . . . . . . . . . . . . . . . . .
2.1.1 Media Query là gì? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.1.2 Media Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.1.3 Cú pháp Media Query . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2 Fluid Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2.1 Khái niệm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2.2 Các thành phần của Flexbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2.3 Một số thuộc tính của Flexbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.3 Responsive images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
13
Bài tập lớn 3 - Nhập môn điện toán , 2019-2020
Page 1/14
Trường Đại học Bách Khoa – Đại học Quốc Gia TP. Hồ Chí Minh
Khoa Khoa học và Kỹ thuật Máy tính
Danh sách hình vẽ
Các thành phần của Flexbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3
4
4
8
Các giá trị của thuộc tính justify-content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Bài tập lớn 3 - Nhập môn điện toán , 2019-2020
Page 2/14
Trường Đại học Bách Khoa – Đại học Quốc Gia TP. Hồ Chí Minh
Khoa Khoa học và Kỹ thuật Máy tính
1 Tìm hiểu chung về Responsive Web Design
1.1 Đặt vấn đề
Sự phát triển nhanh chóng của các thiết bị kết nối internet (laptop, tablet, smartphone, . . . ) đặt ra một
yêu cầu cấp bách cho những người thiết kế web: giao diện trang web phải thích nghi được trên bất kể thiết bị
nào, như Iphone, iPad, netbook, BlackBerry, Kindle,. . . hay kể cả những chiếc điện thoại có màn hình nhỏ. Và
trong những năm tới, với tốc độ phát triển smartphone như hiện nay, rõ ràng sẽ còn rất nhiều thiết bị được
đưa ra thị trường với vô vàng các ràng buộc mới và kích thước màn hình khác nhau. Đây là một bài toán rất
đau đầu cho nhiều người thiết kế web hiện nay. Vậy có nên phát triển nhiều phiên bản khác nhau cho từng loại
thiết bị, như cách facebook đã làm?
Hình 1: Giao diện trang web phải đáp ứng được nhiều loại thiết bị khác nhau
Rõ ràng đó không phải là một lựa chọn tốt, bởi với vô vàng các thiết bị hiện tại, chúng ta đã rất khó để
đáp ứng hết từng đấy thiết bị. Chưa kể trong tương lai, hàng loạt thiết bị mới ra đời, những thiết bị hiện tại
có thể sẽ bị lỗi thời. Chúng ta liên tục phải thiết kế lại, như vậy chúng ta sẽ tốn rất nhiều chi phí và thời gian
cho việc thiết kế lại, bảo trì, nâng cấp.
Thực vậy, hàng loạt đồ công nghệ khủng ồ ạt ra đời cộng với nhu cầu xài web trên di động của người dùng
ngày càng gia tăng, đồng nghĩa với việc chúng ta phải thiết kế trang web như thế nào để đáp ứng tất cả các
kích thước màn hình khác nhau. Từ đó, một khái niệm mới ra đời - Responsive Web Design (RWD).
1.2 Responsive Web Desgin là gì?
Responsive Web Design là một thuật ngữ ám chỉ phương pháp thiết kế website cho khả năng hiển thị tương
thích với mọi kích thước của thiết bị. Nói cách khác, bố cục của các trang web sẽ tự đáp ứng theo hành vi của
người dùng và môi trường hiển thị. Môi trường ở đây chính là kích thước của trình duyệt, hướng xoay hoặc kích
thước của thiết bị, còn thiết bị đa phần sẽ là những thiết bị di động như tablet hoặc smartphone.
Hiểu một cách đơn giản nhất, Web Responsive là phong cách thiết kế Website, sao cho phù hợp với tất cả
các thiết bị cũng như mọi độ phân giải màn hình. Vậy nên, một trang Web đẹp trên máy tính, nhưng khi xem
trên tablet, điện thoại lại lộn xộn, không cân đối về hình ảnh, bố cục, bài viết thì chắc chắn không thể gọi là
Web Responsive.
Lưu ý rằng, Responsive Web Design chỉ sử dụng HTML và CSS. Responsive Web Design không phải là một
chương trình hoặc đoạn mã JavaScript.
1.3 Lịch sử hình thành
Trang web đầu tiên được thiết kế có tính đáp ứng khi thay đổi kích thước trình duyệt là Audi.com vào năm
2001. Tuy nhiên, lúc này nó chỉ đáp ứng tốt cho trình duyệt Internet Explorer. Đến năm 2008, một loạt các
thuật ngữ mới xuất hiện dùng để mô tả cách bố cục trang web. Có thể kể đến như “flexible”, “liquid”, “fluid”,
and “elastic”. Mãi đến cuối năm 2008 đầu 2009, CSS3 Media Query được khai sinh. Đây là tính năng làm tiền
đề cho kỹ thuật RWD sau này.
Bài tập lớn 3 - Nhập môn điện toán , 2019-2020
Page 3/14
Trường Đại học Bách Khoa – Đại học Quốc Gia TP. Hồ Chí Minh
Khoa Khoa học và Kỹ thuật Máy tính
Khi Ethan Marcotte cho ra đời thuật ngữ RWD thì đến năm 2012, RWD đã đứng vị trí thứ hai trong danh
sách “Top Web Design Trends for 2012” bởi tạp chí net magazine. Đến năm 2013, Mashable gọi đây là năm
của RWD. Hầu hết các website đều chuyển sang RWD vì nó mang hiệu quả kinh tế hơn thay vì phát triển ứng
dụng mobile. Và đến ngày nay, thuật ngữ RWD được phổ biến rộng rãi. Có một điều gần như tuyệt đối khi một
trang web mới xuất hiện, nó đều được thiết kế theo hướng này.
Hình 2: Ethan Marcotte – cha đẻ của thuật ngữ Responsive Web Design
1.4 Tầm quan trọng của Responsive Web Design
1.4.1 Đáp ứng nhu cầu thực tế
Với sự bùng nổ của sự phát triển các thiết bị di động, người dùng smartphone ngày càng tăng trưởng một
cách nhanh chóng. Theo số liệu của dammio.com về người dùng Internet Việt Nam vào tháng 10/2018, có 72%
người dùng sử dụng smartphone để truy cập Internet. Như vậy, nhu cầu sử dụng Internet nói chung ngày càng
tăng và đặc biệt là có một lượng lớn người dùng truy cập Internet từ thiết bị di động. Vì thế, áp dụng RWD
chính là đang đáp ứng với nhu cầu thực tế.
Hình 3: Số liệu thống kê về thiết bị sử dụng Internet ở Việt Nam năm 2018 - Theo dammio.com
1.4.2 Hiệu quả kinh tế
Trước đây, các nhà phát triển phải xây dựng ít nhất hai giao diện cho trang web. Một dành cho PC, một
dành cho di động. Hoặc thậm chí một số nhà phát triển còn phải xây dựng ứng dụng mobile. Điều này gây tốn
kém về mặt chi phí. Chưa kể trên các ứng dụng hoặc giao diện riêng, việc hiển thị dữ liệu chưa chắc đã giống
nhau. Vì thế nhà phát triển có thể gặp khó khăn trong việc quản lý.
Bài tập lớn 3 - Nhập môn điện toán , 2019-2020
Page 4/14
Trường Đại học Bách Khoa – Đại học Quốc Gia TP. Hồ Chí Minh
Khoa Khoa học và Kỹ thuật Máy tính
Đối với RWD, với nguyên lý là một mã nguồn nhưng đa giao diện, tương thích tốt trên nhiều thiết bị. Mặc
dù chúng ta không thể lường trước được kích thước của thiết bị. Nhưng với RWD, chuyện này là hoàn toàn khả
thi. Từ đó tiết kiệm công sức và chi phí cho nhà phát triển.
1.4.3 Được Google Search khuyến khích, lợi ích cho SEO
Từ năm 2015, Google Search ưu tiên hiển thị các trang web có giao diện RWD. Thay đổi này với mong
muốn các trang web hướng tới người dùng hơn. Với mong muốn các kết quả tìm được sẽ có nội dung văn bản dễ
friendly) và nhập URL trang web. Kết quả hiển thị sẽ cho biết mức độ thân thiện của website. Nếu website
không thân thiện với di động, thứ hạng trang có thể giảm đáng kể. Một khi trang web hỗ trợ RWD, cụ thể là
thân thiện với di động, thứ hạng sẽ được tái xử lý.
1.4.4 Sử dụng công nghệ tuy mới mà “cũ”
Đối với các nhà phát triển web, RWD là một công nghệ mới. Tuy nhiên, bản chất của RWD cơ bản chỉ
sử dụng CSS3. Nghĩa là, các nhà phát triển web đã có kinh nghiệm với HTML và CSS thì việc nắm bắt RWD
cũng sẽ rất đơn giản trong thời gian ngắn.
1.5 Quy tắc khi thực hiện Responsive Web Design
Nội dung trang web phải luôn nằm trong giới hạn kích thước của chiều ngang màn hình, người dùng chỉ cần
cuộn dọc từ trên xuống để xem được hết nội dung của trang web dễ dàng. Vì vây, nếu để người dùng phải cuộn
ngang hoặc zoom trang web mới xem được toàn bộ nội dung sẽ không phải là RWD và dẫn đến trải nghiệm
người dùng kém. Dưới đây là một sổ quy tắc khác cần tuân thủ trong khi làm RWD:
- Không sử dụng các phần tử HTML có chiều rộng cố định quá lớn. Ví dụ: Một hình ảnh có chiều rộng quá
lớn so với chiều rộng của các thiết bị nhỏ thì khi hiển thị trên các thiết bị này hình ảnh sẽ bị tràn ra ngoài và
cần phải cuộn ngang để xem được toàn bộ ảnh. Vì vậy, cần phải điều chỉnh hình ảnh sao cho phù hợp với chiều
rộng của từng thiết bị.
- Sử dụng CSS media queries để định dạng cho từng thiết bị có chiều rộng khác nhau. Không nên sử dụng
các giá trị tuyệt đối như px, pt cho các phần tử mang tính bao quát trong trang, điều này sẽ làm cho nội dung
của trang web sẽ bị tràn khi xem ở thiết bị có chiều rộng nhỏ hơn giá trị đã thiết lập. Thay vì vậy, hãy sử dụng
các giá trị mang tính tương đối như %, ví dụ như width: 100%;
- Sử dụng icon SVG thay cho icon hình ảnh thông thường (JPG, PNG,...). Các icon, hình ảnh dạng SVG
sẽ không bị mờ khi thu phóng ở bất kỳ kích thước nào, điều này sẽ giúp nội dung của trang web hiển thị tốt
nhất trên các thiết bị Retina như iPhone, iPad, Macbook,...
2 Các kỹ thuật Responsive Web Design
2.1 CSS3 Media Queries – Hỗ trợ các khung nhìn khác nhau
2.1.1 Media Query là gì?
Media Query là một trong những module mới được thêm vào trong CSS3. Nó là một sự cải thiện của Media
Type đã có từ CSS2, bằng việc thêm vào những cú pháp query để ta có thể đáp ứng được cho nhiều thiết bị
với nhiều kích cỡ màn hình khác nhau.
Module Media Query hiện đã được hỗ trợ đầy đủ trong các trình duyệt hiện đại như Webkit, Firefox, Opera
hay IE (kể từ version 9).
2.1.2 Media Type
Media Query là một module mở rộng của Media Type. Vì vậy, để hiểu về Media Query, trước hết ta tìm
hiểu về Media Type.
Media Type vốn đã có từ CSS2, nó giúp ta xác định định dạng của mỗi loại thiết bị.
Ta có thể sử dụng Media Type theo cú pháp sau đây: @media media_type {rules}.
Tất cả các giá trị của Media Type bao gồm:
• all: Dùng cho tất cả các loại Media Type
• aural: Dùng cho speech and sound synthesizers
• braille: Dùng cho các devices liên quan đến chữ nổi (braille)
Bài tập lớn 3 - Nhập môn điện toán , 2019-2020
Page 5/14
Trường Đại học Bách Khoa – Đại học Quốc Gia TP. Hồ Chí Minh
Khoa Khoa học và Kỹ thuật Máy tính
• embossed: Dùng cho các loại máy in các trang braille
• handheld: Dùng cho các thiết bị nhỏ, thiết bị cầm tay
• print: Dùng cho máy in
• projection: Dùng cho các loại máy chiếu
• screen: Dùng cho computer screen
• tty: Dùng cho các thiết bị sử dụng fixed-pitch character grid
• tv: Dùng cho các loại TV
Chẳng hạn như ta có đoạn code sau:
1
2
3
/* Ap dung cho computer screens */
@media screen
body
width: 960 px;
{
{
4
5
}
6
}
7
8
9
10
11
12
/* Ap dung cho cac thiet bi cam tay nho */
@media handheld
body
width: 320 px;
{
{
}
}
2.1.3 Cú pháp Media Query
Cú pháp của Media Query được mở rộng ra từ cú pháp của Media Type như sau:
@media media_type (feature: value) {rules}
2.1.4 Một số Media Feature quan trọng
2.1.4.a width, height
Nếu sử dụng thuộc tính này thì các css rules sẽ chỉ được áp dụng cho những trình duyệt có chiều rộng
hoặc chiều cao đúng với thông số mà ta đã đưa ra. Chẳng hạn như @media (width: 900px) rules thì sẽ chỉ áp
dụng cho những trình duyệt nào có kích cỡ chiều rộng đúng bằng 900px. Vì vậy, hai thuộc tính này rất ít khi
được sử dụng. Thay vào đó người ta thêm các tiền tố min- hay max- và để được các thuộc tính sau: min-width,
min-height, max-width, max-height. Đây là những thuộc tính cho phép thiết lập những rules cho trình duyệt
có chiều rộng hay chiều dài nằm trong một khoảng nào đó. Ví dụ:
1
2
/* Ap dung cho nhung browser co chieu rong <= 900 px */
@media ( max-width: 900 px)
{
3
4
body
{
font-size: 16 px;
5
}
6
}
7
8
/* Ap dung cho nhung browser co chieu rong >= 600 px */
@media ( min-width: 600 px)
{
9
body
{
font-size: 14 px;
10
11
12
}
}
13 /* Ap dung cho nhung browser co chieu rong >= 800 px */
14 @media ( min-width: 800 px)
{
15
16
17
18
body
{
font-size: 15 px;
}
}
19 /* Ap dung cho nhung browser co chieu rong <= 700 px */
20 @media ( max-width: 700 px)
{
21
22
23
24
body
{
font-size: 13 px;
}
}
Lưu ý rằng, những rules khai báo sau sẽ đè lên những rules khai báo trước, vì vậy với đoạn code trên thì nếu
trình duyệt có chiều rộng là 650px thì rule được áp dụng ở đây sẽ là font-size: 13px;, còn chiều rộng là 750px
thì rule được áp dụng sẽ là font-size: 15px;.
Bài tập lớn 3 - Nhập môn điện toán , 2019-2020
Page 6/14
Trường Đại học Bách Khoa – Đại học Quốc Gia TP. Hồ Chí Minh
Khoa Khoa học và Kỹ thuật Máy tính
2.1.4.b decide-width, decide-height
Cũng giống như width, height hay min-width, min-height, max-width, max-height, thế nhưng với việc thêm
device- ở phía trước thì các tính toán sẽ được dựa trên kích cỡ của thiết bị, thay vì kích cỡ của trình duyệt.
2.1.4.c aspect-ratio và device-aspect-ratio
Đây là những thuộc tính cho phép áp dụng các rules dựa trên tỉ lệ của trình duyệt hay tỉ lệ của thiết bị. Ta
có thể dùng các thông số như 16/9 hay 16/10, hoặc có thể viết cả kích cỡ cụ thể ra cho dễ đọc như 1280/720
chẳng hạn. Hai thuộc tính này cũng có thể sử dụng các tiền tố min- hay max-.
2.1.4.d resolution
Đây là thuộc tính đánh giá dựa trên độ phân giải của màn hình thiết bị. Thuộc tính này cũng có thể sử
dụng các tiền tố min- hay max-. Ví dụ:
1
2
/* Su dung don vi la dpi: dots per inch */
@media ( max-resolution: 300 dpi)
{
3
4
body
{
font-size: 15 px;
5
}
6
}
7
8
/* Su dung don vi la dpcm: dots per centimeter */
@media ( min-resolution: 600 dpcm)
{
9
body
{
font-size: 14 px;
10
11
12
}
}
2.1.4.e orientation
Đây là thuộc tính đánh giá dựa trên trạng thái của thiết bị, có 2 trạng thái: portrait (xoay dọc: khi mà
chiều dài >= chiều rộng) và landscape (quay ngang: chiều dài < chiều rộng). Ví dụ:
1
2
/* Ap dung khi thiet bi de doc */
@media ( orientation: portrait)
{
3
4
body
{
font-size: 14 px;
5
}
6
}
7
8
/* Ap dung khi thiet bi de ngang */
@media ( orientation: landscape)
{
9
body
{
font-size: 15 px;
10
11
12
}
}
2.1.4.f Một số thuộc tính khác
Ngoài những thuộc tính thường gặp đã liệt kê ở trên, còn một số thuộc tính khác khác, ít được sử dụng
hơn, đó là color, color-index, monochrome, scan và grid.
1
2
/* Ap dung cho man hinh mau */
@media (color)
{
3
4
body
{
font-size: 14 px;
5
}
6
}
7
8
/* Ap dung cho man hinh co it nhat 256 mau */
@media ( min-color-index: 256)
{
9
body
{
font-size: 15 px;
10
11
12
}
}
Chúng ta thể ghép nhiều thuộc media vào trong một câu lệnh kiểm tra bằng toán tử and hoặc , (mang ý
nghĩa của phép or). Ngoài ra, chúng ta cũng có thể sử dụng not hoặc only. Ví dụ:
Bài tập lớn 3 - Nhập môn điện toán , 2019-2020
Page 7/14
Trường Đại học Bách Khoa – Đại học Quốc Gia TP. Hồ Chí Minh
Khoa Khoa học và Kỹ thuật Máy tính
1
2
/* Ap dung cho trinh duyet co chieu rong >=800px va <= 900 px */
@media ( max-width: 900 px) and ( min-width: 800 px)
{
3
4
body
{
font-size: 14 px;
5
}
6
}
7
8
/* Ap dung cho man hinh nam ngang hoac co chieu rong >=1200px */
@media ( orientation: landscape), ( device-min-width: 1200 px)
{
9
body
{
font-size: 15 px;
10
11
12
}
}
13 /* Ap dung cho man hinh co ti le khong phai la 4/3 */
14 @media not ( device-aspect-ratio: 4/3)
{
15
16
17
18
body
{
font-size: 15 px;
}
}
2.2 Fluid Layouts
2.2.1 Khái niệm
Fluid layout là một bố cục sử dụng các giá trị tỷ lệ như một đơn vị đo lường cho các khối nội dung, hình
ảnh, hoặc bất kỳ mục nào khác, điều này cho phép các trang web mở rộng và rút gọn tùy vào kích thước màn
hình của người dùng.
Từ năm 2015, có một kỹ thuật mới ra đời để xây dựng bố cục linh hoạt cho các trang web Responsive, gọi
là Flexbox. Flexbox là một kiểu dàn trang (layout mode) mà nó sẽ tự cân đối kích thước của các phần tử bên
trong để hiển thị trên mọi thiết bị. Nói cách khác, chúng ta không cần thiết lập kích thước của phần tử, không
cần cho nó float, chỉ cần thiết lập nó hiển thị chiều ngang hay chiều dọc, lúc đó các phần tử bên trong có thể
hiển thị theo ý muốn.
Hiện nay, theo lời khuyên từ Mozilla thì chúng ta sử dụng Flexbox để thiết lập bố cục trong phạm vi nhỏ
(ví dụ như phần Menu trong website).
2.2.2 Các thành phần của Flexbox
Hai thành phần quan trọng nhất trong một bố cục Flexbox là gồm container và item:
Hình 4: Các thành phần của Flexbox
• Container: là thành phần lớn bao quanh các phần tử bên trong, chúng ta sẽ thiết lập kiểu hiển thị inline
(sắp xếp theo chiều ngang) hoặc kiểu sắp xếp theo chiều dọc. Khi đó, các item bên trong sẽ hiển thị dựa
trên thiết lập của container này.
Bài tập lớn 3 - Nhập môn điện toán , 2019-2020
Page 8/14
Trường Đại học Bách Khoa – Đại học Quốc Gia TP. Hồ Chí Minh
Khoa Khoa học và Kỹ thuật Máy tính
• Item: Các phần tử con của container được gọi là item, ở item chúng ta có thể thiết lập nó sẽ sử dụng bao
nhiêu cột trong một container, hoặc thiết lập thứ tự hiển thị của nó.
Ngoài hai thành phần chính đó, chúng ta có thể thấy hình trên còn có:
• Main start, main end: Khi thiết lập flexbox, điểm bắt đầu của container gọi là main start và điểm kết
thúc được gọi là main end. Điều này có nghĩa, các item bên trong sẽ hiển thị từ main start đến main end
(hoặc là được phép hiển thị đến main end). Và chiều vuông góc của nó là cross start, cross end cũng có ý
nghĩa tương tự nhưng luôn vuông góc với main start, main end.
• Main axis: Trục này là trục chính để điều khiển hướng mà các item sẽ hiển thị. Như chúng ta thấy trên
hình main axis là trục dọc nên các item sẽ hiển thị theo chiều dọc, tuy nhiên ta có thể sử dụng thuộc tính
flex-direction để thay đổi trục của main axis và lúc đó các item sẽ hiển thị theo nó. Và cross axis luôn là
trục vuông góc của main axis.
• Main size: Chúng ta có thể hiểu đơn giản main size là kích thước (chiều rộng hoặc dọc) của mỗi item dựa
theo trục main axis.
• Cross size: Là kích thước (chiều rộng hoặc dọc) của mỗi item dựa theo trục cross axis.
Ví dụ minh họa:
1
2
3
<!DOCTYPE html>
<html>
<head>
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<meta charset="utf-8">
<title> Test Flexbox </title>
</head>
<style>
/** Global CSS **/
. container
background: red;
margin: auto;
padding: 5px;
{
0
}
. item
{
background: blue;
margin: 5px;
color: white;
font-size: 24 px;
font-weight: bold;
height: 50 px;
text-align: center;
line-height: 50 px;
}
24 </style>
25
26 <body>
27
28
29
30
31
32
<div class="container">
<div class="item item1">
<div class="item item2">
<div class="item item3">
<div class="item item4">
</div>
1
2
3
4
</div>
</div>
</div>
</div>
33 </body>
34 </html>
Kết quả của đoạn code trên như sau:
Bây giờ chúng ta sẽ bắt đầu làm việc với Flexbox ở đây. Trước tiên chúng ta sẽ đưa .container về hiển thị ở
dạng flexbox với display: flex.
Bài tập lớn 3 - Nhập môn điện toán , 2019-2020
Page 9/14
Trường Đại học Bách Khoa – Đại học Quốc Gia TP. Hồ Chí Minh
Khoa Khoa học và Kỹ thuật Máy tính
1
2
3
4
/** Flex layout **/
. container
display: flex;
{
}
Chúng ta sẽ thấy các item bên trong đã tự hiển thị theo chiều dọc, tương ứng với trục main axis mặc định
là chiều ngang.
2.2.3 Một số thuộc tính của Flexbox
2.2.3.a flex-direction
Cũng với ví dụ như trên, nếu muốn đổi trục hiển thị các item thì chúng ta sẽ sử dụng thuộc tính flex-direction.
Cụ thể:
flex-direction: row | column | row-reverse | column-reverse
• row: chuyển trục main axis thành chiều ngang, nghĩa là hiển thị theo hàng.
• colum: chuyển trục main axis thành chiều dọc, nghĩa là hiển thị theo cột.
• row-reverse: hiển thị theo hàng nhưng đảo ngược vị trí các item.
• column-reverse: hiển thị theo cột nhưng đảo ngược vị trí các item.
Ví dụ chúng ta sẽ sử dụng giá trị column-reverse cho thuộc tính flex-direction.
1
2
3
4
5
/** Flex layout **/
. item
display: flex;
{
flex-direction: column-reverse;
}
Kết quả sẽ được như sau:
2.2.3.b flex-wrap
Để hiểu rõ hơn về flex-wrap, chúng ta thử thêm chiều rộng cho mỗi item bên trong là 1000px xem chuyện
gì sẽ xảy ra khi dùng flexbox.
1
2
3
. item
{
width: 1000 px;
}
Kết quả như sau:
Như vậy, dù chúng ta có thêm chiều rộng cho mỗi item bên trong là 1000px nhưng nó vẫn hiển thị trên một
hàng đều nhau. Lý do bởi vì theo mặc định, flexbox tự căn chỉnh các phần tử hiển thị đều nhau theo trục main
axis của nó dựa theo chiều rộng của container. Vì vậy cho dù chúng ta có điều chỉnh chiều rộng vượt quá giới
hạn của nó thì nó vẫn không bị nhảy xuống dòng.
Bây giờ hãy thử thêm thuộc tính flex-wrap: wrap vào container như sau:
Bài tập lớn 3 - Nhập môn điện toán , 2019-2020
Page 10/14
Trường Đại học Bách Khoa – Đại học Quốc Gia TP. Hồ Chí Minh
Khoa Khoa học và Kỹ thuật Máy tính
1
2
3
4
. container {
display: flex;
flex-wrap: wrap;
}
Kết quả sẽ được như sau:
Như vậy, chúng ta có thể hiểu thuộc tính flex-wrap có tác dụng cho phép container có thể bọc lại các item
kể cả khi kích thước của các item bị thay đổi, mặc định là nowrap. Thuộc tính này có thể áp dụng với cả chiều
dọc của container và item.
2.2.3.c order
Với đoạn HTML ở cũng ví dụ trên, mỗi item có số thứ tự là 1, 2, 3, 4 tương ứng với các class .item1, .item2,
.item3, .item4. Mặc định những item này sẽ hiển thị theo thứ tự viết HTML, nhưng với thuộc tính order, chúng
ta có thể sắp xếp lại chúng theo ý muốn. Ví dụ như sau:
1
2
3
. container {
display: flex;
flex-wrap: wrap;
4
5
}
. item
{
width: 1000 px;
6
7
8
9
10
}
. item1
{
order: 4;
}
11 . item2
{
order: 1;
12
13
}
14 . item3
{
order: 2;
15
16
}
17 . item4
{
order: 3;
18
19
}
Kết quả như ảnh bên dưới.
Như vậy, .item2 đã chuyển thành item xuất hiện đầu tiên, .item3 xuất hiện thứ 2, .item4 xuất hiện thứ 3,
và cuối cùng .item1 xuất hiện cuối cùng.
2.2.3.d flex-grow
Để xem xét ví dụ này, trước tiên chúng ta thiết lập chiều rộng của mỗi item là 200px, sau đó hãy đặt ở
.item2 thuộc tính: flex-grow: 1;
1
2
3
. item2
{
flex-grow: 1;
}
Bài tập lớn 3 - Nhập môn điện toán , 2019-2020
Page 11/14
Trường Đại học Bách Khoa – Đại học Quốc Gia TP. Hồ Chí Minh
Khoa Khoa học và Kỹ thuật Máy tính
Kết quả như sau:
Bây giờ chúng ta bổ sung vào .item 1 thuộc tính: flex-grow: 2;
1
2
3
4
5
6
. item2
{
flex-grow: 1;
}
. item1
{
flex-grow: 2;
}
Kết quả như sau:
Lúc này, item1 (có thuộc tính flex-grow: 2) sẽ lấy phần dư gấp đôi item2 (có thuộc tính flex-grow: 1).
2.2.3.e flex-shrink
Khi chúng ta co trình duyệt, tất cả các item đều co lại với tỉ lệ tốc độ bằng nhau. Vậy nếu chúng ta muốn
thay đổi tỉ lệ co này cho một hoặc một số item nhất định, chúng ta sử dụng thuộc tính flex-shrink. Ví dụ chúng
ta muốn item3 co lại gấp 3 lần bình thường những item khác, chúng ta sẽ thiết lập css như sau:
1
2
3
. item3
{
flex-shrink: 3;
}
Và đây là kết quả khi chúng ta co trình duyệt lại:
2.2.3.f flex-basis
Để hiểu thuộc tính này, trước tiên ta đặt chiều rộng tất cả item là 200px.
Thuộc tính flex-basis chúng ta có thể hiểu đơn giản là thiết lập một item nào đó có kích thước nhất định.
Ví dụ chúng ta thiết lập item3 rộng 500px, các item khác vẫn giữ kích thước ban đầu.
1
2
3
4
5
6
. item
{
width: 200 px;
}
. item3
{
flex-basis: 500 px;
}
Kết quả như sau:
2.2.3.g justify-content
Mặc định các item bên trong sẽ rải đều bắt đầu từ main start đến main end, tuy nhiên nếu container vẫn
còn khoảng trống thì có thể dùng thuộc tính justify-content để điều chỉnh lại vị trí bắt đầu của nó.
Thuộc tính này có 5 giá trị như ảnh bên dưới:
Bài tập lớn 3 - Nhập môn điện toán , 2019-2020
Page 12/14
Trường Đại học Bách Khoa – Đại học Quốc Gia TP. Hồ Chí Minh
Khoa Khoa học và Kỹ thuật Máy tính
Hình 5: Các giá trị của thuộc tính justify-content
2.3 Responsive images
Nếu thay đổi kích thước ảnh quá nhỏ, hình ảnh sẽ xuất hiện với chất lượng thấp, tuy nhiên chúng ta vẫn
muốn nó sẽ xuất hiện trên web và không muốn bỏ nó đi vì nó quan trọng. Vì vậy, hình ảnh được chia thành 2
nhóm: một nhóm có thể cắt bỏ đi những phần không quan trọng và nhóm khác sẽ giữ nguyên ảnh nhưng sẽ bị
zoom.
Có rất nhiều kỹ thuật dùng để tạo ra flexible image đáp ứng được với mọi kích cỡ màn hình khác nhau.
Nhưng thông dụng và đơn giản nhất là Sử dụng stylesheet với:
1
2
3
img
{
max-width: 100%;
}
3 Tổng kết
Trong những năm gần đây, Responsive website trở thành một trong những yếu tố cực kỳ quan trọng để
Google có thể đánh giá và xếp hạng website trên bảng kết quả tìm kiếm của mình. Bằng chứng cho việc này
chính là đa số các website hiện nay đều được “bot mobile” thu thập dữ liệu thay vì trước đó là “bot desktop”.
Google đang quan trọng và đánh giá cao những website cho trải nghiệm tốt trên mobile, chính vì vậy Responsive
Web là không thể thiếu cho các website hiện đại.
Bài tập lớn 3 - Nhập môn điện toán , 2019-2020
Page 13/14
Trường Đại học Bách Khoa – Đại học Quốc Gia TP. Hồ Chí Minh
Khoa Khoa học và Kỹ thuật Máy tính
Tài liệu
[2] Ben Frain: Responsive Web Design with HTML5 and CSS3, Second Edition, (2015).
so-lieu-thong-ke-internet-viet-nam-nam-2018. Last accessed 01/01/2019.
accessed 01/01/2019.
Bài tập lớn 3 - Nhập môn điện toán , 2019-2020
Page 14/14
15 trang
18760
Free
Bạn đang xem tài liệu "Bài tập lớn Nhập môn điện toán - Bài tập lớn 3: Tìm hiểu về Responsive Web Design - Nguyễn Xuân Trực", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- bai_tap_lon_nhap_mon_dien_toan_bai_tap_lon_3_tim_hieu_ve_res.pdf
info.txt
Slide.pptx
Source_HTML.rar
Source_Latex.zip
