Khi số lượng người dùng điện thoại di động trên Internet tăng lên, việc các nhà thiết kế web bố trí nội dung theo cách phù hợp với nhiều kích thước màn hình ngày càng trở nên quan trọng. Thiết kế web thích ứng, ban đầu do Ethan Marcotte xác định trong A List Apart, là một chiến lược thiết kế đáp ứng nhu cầu của người dùng và khả năng của thiết bị bằng cách thay đổi bố cục của trang web cho phù hợp với thiết bị đang được sử dụng. Ví dụ: một trang web thích ứng có thể hiển thị nội dung ở chế độ xem một cột trên điện thoại, hai cột trên máy tính bảng và ba hoặc bốn cột trên máy tính để bàn.
Vì các thiết bị có thể truy cập Internet có rất nhiều kích thước màn hình, nên trang web của bạn cần phải thích ứng với mọi kích thước màn hình hiện có hoặc trong tương lai. Thiết kế thích ứng hiện đại cũng tính đến các chế độ tương tác như màn hình cảm ứng. Mục tiêu là tối ưu hoá trải nghiệm cho mọi người.
Đặt khung nhìn
Các trang được tối ưu hoá cho nhiều thiết bị phải bao gồm thẻ meta viewport ở đầu tài liệu. Thẻ này cho trình duyệt biết cách kiểm soát kích thước và tỷ lệ của trang.
Để cố gắng mang lại trải nghiệm tốt nhất, các trình duyệt cho thiết bị di động sẽ hiển thị trang trên chiều rộng màn hình máy tính (thường vào khoảng 980px, mặc dù kích thước này thay đổi tuỳ theo thiết bị), sau đó cố gắng làm cho nội dung trông đẹp hơn bằng cách tăng cỡ chữ và điều chỉnh tỷ lệ nội dung cho vừa với màn hình. Điều này có thể khiến phông chữ trông không nhất quán và yêu cầu người dùng phải phóng to để xem và tương tác với nội dung.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Việc sử dụng giá trị khung nhìn meta width=device-width sẽ cho trang biết để khớp với chiều rộng của màn hình tính bằng pixel không phụ thuộc vào thiết bị (DIP), một đơn vị pixel hình ảnh chuẩn (có thể bao gồm nhiều pixel thực trên màn hình có mật độ điểm ảnh cao). Điều này cho phép trang định hình lại nội dung để phù hợp với nhiều kích thước màn hình.
Một số trình duyệt giữ nguyên chiều rộng của trang khi xoay sang chế độ ngang và tính năng thu phóng để lấp đầy màn hình thay vì chỉnh lại luồng. Khi bạn thêm giá trị initial-scale=1, trình duyệt sẽ cần đặt mối quan hệ 1:1 giữa pixel CSS và pixel độc lập với thiết bị bất kể hướng của thiết bị, cho phép trang tận dụng toàn bộ chiều rộng ngang.
Phần Không có thẻ <meta name="viewport"> với width hoặc initial-scale
Việc kiểm tra Lighthouse có thể giúp bạn tự động hóa quy trình đảm bảo tài liệu HTML của bạn sử dụng thẻ meta khung nhìn đúng cách.
Đặt kích thước nội dung cho khung nhìn
Trên cả máy tính và thiết bị di động, người dùng quen với việc cuộn trang web theo chiều dọc chứ không phải theo chiều ngang. Việc buộc người dùng cuộn theo chiều ngang hoặc thu nhỏ để xem toàn bộ trang sẽ gây ra trải nghiệm kém cho người dùng.
Khi phát triển một trang web dành cho thiết bị di động bằng thẻ meta viewport, thường thì bạn sẽ vô tình tạo ra nội dung trang không vừa với khung nhìn đã chỉ định. Ví dụ: hình ảnh hiển thị rộng hơn khung nhìn có thể gây ra việc cuộn theo chiều ngang. Để tránh điều này, hãy điều chỉnh nội dung của bạn cho vừa với khung nhìn.
Quy trình kiểm tra Lighthouse về Kích thước của nội dung không phù hợp với khung nhìn có thể giúp bạn tự động hoá quy trình phát hiện nội dung tràn.
Hình ảnh
Hình ảnh có kích thước cố định sẽ khiến trang cuộn nếu hình ảnh lớn hơn khung nhìn. Bạn nên đặt max-width của tất cả hình ảnh thành 100%. Thao tác này sẽ thu nhỏ hình ảnh để vừa với không gian có sẵn, đồng thời ngăn hình ảnh bị kéo giãn quá kích thước ban đầu.
Trong hầu hết các trường hợp, bạn có thể thực hiện việc này bằng cách thêm đoạn mã sau vào biểu định kiểu:
img {
max-width: 100%;
display: block;
}
Thêm kích thước của hình ảnh vào phần tử img
Ngay cả khi bạn đặt max-width: 100%, bạn vẫn nên thêm thuộc tính width và height vào thẻ <img> để trình duyệt có thể đặt trước không gian cho hình ảnh trước khi tải. Điều này giúp ngăn bố cục thay đổi.
Bố cục
Do kích thước và chiều rộng màn hình tính bằng pixel CSS khác nhau rất nhiều giữa các thiết bị (ví dụ: giữa điện thoại và máy tính bảng, thậm chí giữa các điện thoại khác nhau), nên nội dung không nên dựa vào một chiều rộng khung nhìn cụ thể để hiển thị tốt.
Trước đây, việc này yêu cầu bạn phải đặt các phần tử bố cục theo tỷ lệ phần trăm. Việc sử dụng phép đo pixel yêu cầu người dùng cuộn theo chiều ngang trên màn hình nhỏ:
Việc sử dụng tỷ lệ phần trăm sẽ làm cho các cột hẹp hơn trên màn hình nhỏ hơn, vì mỗi cột luôn chiếm cùng một tỷ lệ phần trăm chiều rộng màn hình:
Các kỹ thuật bố cục CSS hiện đại như Flexbox, Bố cục lưới và Multicol giúp bạn tạo các lưới linh hoạt này dễ dàng hơn nhiều.
Flexbox
Hãy dùng Flexbox khi bạn có một nhóm các mục có kích thước khác nhau và muốn các mục này nằm vừa vặn thoải mái trong một hàng hoặc nhiều hàng, trong đó các mục nhỏ hơn chiếm ít không gian hơn còn các mục lớn hơn chiếm nhiều không gian hơn.
.items {
display: flex;
justify-content: space-between;
}
Bạn có thể sử dụng Flexbox để hiển thị các mục dưới dạng một hàng hoặc gói vào nhiều hàng khi không gian có sẵn giảm xuống.
Bố cục lưới CSS
Bố cục lưới CSS tạo ra các lưới linh hoạt. Bạn có thể cải thiện ví dụ về thành phần nổi trước đó bằng cách sử dụng bố cục lưới và đơn vị fr, đại diện cho một phần không gian có sẵn trong vùng chứa.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
Bạn cũng có thể sử dụng Bố cục lưới để tạo bố cục lưới thông thường với số lượng mục vừa đủ. Số lượng kênh có sẵn sẽ giảm khi kích thước màn hình giảm. Bản minh hoạ sau đây cho thấy một lưới chứa nhiều thẻ vừa với mỗi hàng, với kích thước tối thiểu là 200px.
Bố cục nhiều cột
Đối với một số loại bố cục, bạn có thể sử dụng Bố cục nhiều cột (Multicol) để tạo số lượng cột thích ứng bằng thuộc tính column-width.
Trong bản minh hoạ sau, trang sẽ thêm các cột khi có chỗ cho một cột 200px khác.
Sử dụng truy vấn phương tiện CSS để tạo tính thích ứng
Đôi khi, bạn có thể cần thực hiện các thay đổi rộng rãi hơn đối với bố cục để hỗ trợ một số kích thước màn hình nhất định so với các kỹ thuật được mô tả trước đó. Đây là lúc truy vấn nội dung nghe nhìn phát huy tác dụng.
Truy vấn nội dung đa phương tiện là các bộ lọc đơn giản mà bạn có thể áp dụng cho kiểu CSS để thay đổi các kiểu đó dựa trên loại thiết bị hiển thị nội dung. Các lớp này cũng có thể thay đổi kiểu dựa trên các tính năng của thiết bị, bao gồm chiều rộng, chiều cao, hướng và liệu thiết bị có đang được dùng làm màn hình cảm ứng hay không.
Để cung cấp nhiều kiểu in, bạn có thể nhắm mục tiêu một loại đầu ra và thêm biểu định kiểu cho các kiểu in:
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…
Bạn cũng có thể sử dụng truy vấn nội dung đa phương tiện để đưa các kiểu in vào trang kiểu chính:
@media print {
/* print styles go here */
}
Đối với thiết kế web thích ứng, các truy vấn phổ biến nhất là về các tính năng của thiết bị để bạn có thể tuỳ chỉnh bố cục cho màn hình cảm ứng hoặc màn hình nhỏ hơn.
Truy vấn nội dung nghe nhìn dựa trên kích thước khung nhìn
Truy vấn nội dung nghe nhìn cho phép bạn tạo trải nghiệm thích ứng áp dụng các kiểu cụ thể cho kích thước màn hình cụ thể. Truy vấn về kích thước màn hình có thể kiểm tra những điều sau:
width(min-width,max-width)height(min-height,max-height)orientationaspect-ratio
Tất cả các tính năng này đều được hỗ trợ rất tốt trên trình duyệt. Để biết thêm thông tin chi tiết, bao gồm cả thông tin hỗ trợ trình duyệt, hãy xem width (chiều rộng), height (chiều cao), orientation (hướng) và aspect-ratio (tỷ lệ khung hình) trên MDN.
Truy vấn về nội dung nghe nhìn dựa trên khả năng của thiết bị
Do hàng loạt thiết bị có sẵn, các nhà phát triển không thể cho rằng mọi thiết bị lớn đều là máy tính để bàn hoặc máy tính xách tay thông thường, hoặc mọi thiết bị nhỏ đều sử dụng màn hình cảm ứng. Một số nội dung bổ sung mới hơn trong thông số kỹ thuật của truy vấn nội dung nghe nhìn cho phép bạn kiểm thử các tính năng như loại con trỏ dùng để tương tác với thiết bị và liệu người dùng có thể giữ con trỏ trên các phần tử hay không.
hoverpointerany-hoverany-pointer
Hãy thử xem bản minh hoạ này trên các thiết bị khác nhau, chẳng hạn như máy tính để bàn và điện thoại hoặc máy tính bảng thông thường.
Các tính năng mới này được hỗ trợ tốt trong tất cả các trình duyệt hiện đại. Tìm hiểu thêm trên các trang MDN về di chuột, any-hover, con trỏ và any-pointer.
Sử dụng any-hover và any-pointer
Các tính năng any-hover và any-pointer sẽ kiểm thử xem người dùng có thể giữ con trỏ trên các phần tử (thường được gọi là di chuột) hay sử dụng con trỏ, ngay cả khi đó không phải là cách chính mà người dùng tương tác với thiết bị. Hãy cẩn thận khi sử dụng các phương thức này, ví dụ: để tránh buộc người dùng màn hình cảm ứng chuyển sang sử dụng chuột.
Tuy nhiên, any-hover và any-pointer có thể hữu ích nếu bạn cần xác định loại thiết bị mà người dùng sử dụng. Ví dụ: máy tính xách tay có màn hình cảm ứng và bàn di chuột phải khớp với con trỏ thô và con trỏ tinh, ngoài khả năng di chuột.
Cách chọn điểm ngắt
Không xác định các điểm ngắt dựa trên lớp thiết bị hoặc bất kỳ sản phẩm, tên thương hiệu hoặc hệ điều hành nào. Việc này khiến mã trở nên khó duy trì. Thay vào đó, hãy để nội dung xác định cách bố cục thay đổi để vừa với vùng chứa.
Chọn các điểm ngắt chính bằng cách bắt đầu từ những điểm nhỏ, sau đó tăng dần
Trước tiên, hãy thiết kế nội dung vừa với kích thước màn hình nhỏ, sau đó mở rộng màn hình cho đến khi cần có điểm ngắt. Điều này cho phép bạn giảm thiểu số lượng điểm ngắt trên trang và tối ưu hoá các điểm ngắt đó dựa trên nội dung.
Trong ví dụ sau đây, chúng tôi sẽ trình bày về tiện ích dự báo thời tiết ở đầu trang này. Bước đầu tiên là làm cho thông tin dự báo trông đẹp mắt trên màn hình nhỏ:
Tiếp theo, hãy đổi kích thước trình duyệt cho đến khi có quá nhiều khoảng trắng giữa các phần tử để làm cho tiện ích trông đẹp mắt. Quyết định này là chủ quan, nhưng chắc chắn là quá rộng nếu lớn hơn 600px.
Để chèn điểm ngắt tại 600px, hãy tạo hai truy vấn đa phương tiện ở cuối CSS cho thành phần: một truy vấn để sử dụng khi trình duyệt có kích thước 600px trở xuống và một truy vấn để sử dụng khi trình duyệt có kích thước rộng hơn 600px.
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
Cuối cùng, hãy tái cấu trúc CSS. Bên trong truy vấn nội dung đa phương tiện cho max-width của 600px, hãy thêm CSS chỉ dành cho màn hình nhỏ. Bên trong truy vấn nội dung đa phương tiện cho min-width của 601px, hãy thêm CSS cho các màn hình lớn hơn.
Chọn các điểm ngắt nhỏ khi cần
Ngoài việc chọn các điểm ngắt chính khi bố cục thay đổi đáng kể, bạn cũng nên điều chỉnh cho các thay đổi nhỏ. Ví dụ: giữa các điểm ngắt chính, bạn có thể điều chỉnh lề hoặc khoảng đệm trên một phần tử hoặc tăng cỡ chữ để bố cục trông tự nhiên hơn.
Ví dụ này tuân theo cùng một mẫu như ví dụ trước, bắt đầu bằng việc tối ưu hoá bố cục màn hình nhỏ hơn. Trước tiên, hãy tăng phông chữ khi chiều rộng khung nhìn lớn hơn 360px. Sau đó, khi có đủ không gian, bạn có thể tách nhiệt độ cao và thấp để chúng nằm trên cùng một dòng và làm cho biểu tượng thời tiết lớn hơn.
@media (min-width: 360px) {
body {
font-size: 1.0em;
}
}
@media (min-width: 500px) {
.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
display: inline-block;
width: 45%;
}
.seven-day-fc .seven-day-temp {
margin-left: 5%;
}
.seven-day-fc .icon {
width: 64px;
height: 64px;
}
}
Đối với màn hình lớn, bạn nên giới hạn chiều rộng tối đa của bảng thông tin dự báo để bảng này không sử dụng toàn bộ chiều rộng màn hình.
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
Tối ưu hoá văn bản để đọc
Theo lý thuyết về khả năng đọc cổ điển, một cột lý tưởng phải chứa từ 70 đến 80 ký tự mỗi dòng (khoảng 8 đến 10 từ bằng tiếng Anh). Hãy cân nhắc thêm điểm ngắt mỗi khi chiều rộng của một khối văn bản tăng lên khoảng 10 từ.
Trong ví dụ này, phông chữ Roboto tại 1em tạo ra 10 từ mỗi dòng trên màn hình nhỏ hơn, nhưng màn hình lớn hơn cần có một điểm ngắt. Trong trường hợp này, nếu chiều rộng của trình duyệt lớn hơn 575px, thì chiều rộng nội dung lý tưởng sẽ là 550px.
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
Tránh ẩn nội dung (:#avoid-hiding-content)
Hãy cẩn thận khi chọn nội dung cần ẩn hoặc hiển thị tuỳ theo kích thước màn hình. Đừng ẩn nội dung chỉ vì bạn không thể vừa màn hình. Kích thước màn hình không dự đoán được nội dung mà người dùng có thể muốn xem. Ví dụ: việc xoá số lượng phấn hoa khỏi thông tin dự báo thời tiết có thể là vấn đề nghiêm trọng đối với những người bị dị ứng vào mùa xuân và cần thông tin đó để quyết định xem họ có thể ra ngoài hay không.
Xem điểm ngắt truy vấn nội dung nghe nhìn trong Công cụ của Chrome cho nhà phát triển
Sau khi bạn thiết lập các điểm ngắt truy vấn nội dung nghe nhìn, hãy kiểm tra xem các điểm ngắt đó ảnh hưởng như thế nào đến giao diện của trang web. Bạn có thể đổi kích thước cửa sổ trình duyệt để kích hoạt các điểm ngắt. Tuy nhiên, Công cụ của Chrome cho nhà phát triển có sẵn một tính năng cho thấy giao diện của trang trong các điểm ngắt khác nhau.
Cách xem trang của bạn ở nhiều điểm ngắt:
- Mở Công cụ cho nhà phát triển.
- Bật Chế độ thiết bị. Chế độ này sẽ mở ở chế độ thích ứng theo mặc định.
- Để xem các truy vấn nội dung nghe nhìn, hãy mở trình đơn Chế độ thiết bị rồi chọn Show media query (Hiện truy vấn nội dung nghe nhìn). Thao tác này sẽ hiển thị các điểm ngắt dưới dạng các thanh có màu phía trên trang.
- Nhấp vào một trong các thanh để xem trang của bạn trong khi truy vấn nội dung nghe nhìn đó đang hoạt động. Nhấp chuột phải vào một thanh để chuyển đến định nghĩa của truy vấn nội dung nghe nhìn đó.