Khi số lượng người dùng điện thoại di động trên Internet tăng lên, các nhà thiết kế web ngày càng phải bố trí nội dung theo cách phù hợp với nhiều kích thước màn hình. Thiết kế web thích ứng, ban đầu được Ethan Marcotte định nghĩa 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ị mà họ sử dụng 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.
Vì các thiết bị có thể kết nối Internet có rất nhiều kích thước màn hình có thể có, 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 tại 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 có thẻ meta viewport trong phần đầu của 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, trình duyệt di động sẽ hiển thị trang ở độ rộng màn hình máy tính (thường là khoảng 980px, mặc dù kích thước này khác nhau tuỳ theo thiết bị), sau đó cố gắng làm cho nội dung đẹp mắt hơn bằng cách tăng kích thước phông chữ và điều chỉnh tỷ lệ của 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à người dùng phải phóng to để xem cũng như 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ị meta viewport width=device-width cho biết trang sẽ khớp với chiều rộng 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 trực quan tiêu chuẩn (có thể được tạo thành từ nhiều pixel thực trên màn hình có mật độ cao). Điều này cho phép trang sắp xếp lại nội dung cho 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à phóng to để lấp đầy màn hình thay vì điều chỉnh lại bố cục. Việc thêm giá trị initial-scale=1 sẽ yêu cầu trình duyệt thiết lập mối quan hệ 1:1 giữa các pixel CSS và pixel độc lập với thiết bị, bất kể hướng thiết bị, cho phép trang tận dụng toàn bộ chiều rộng ngang.
Quy trình kiểm tra Không có thẻ <meta name="viewport"> có width hoặc initial-scale của Lighthouse có thể giúp bạn tự động hoá quy trình đảm bảo rằng tài liệu HTML của bạn sử dụng thẻ meta của khung hiển thị một cách chính xác.
Thiết lập kích thước cho nội dung trong khung nhìn
Cả trên máy tính và thiết bị di động, người dùng đều 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 phải 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 di động có thẻ meta viewport, bạn thường vô tình tạo ra nội dung trang không hoàn toàn phù hợp với khung hiển thị đã chỉ định. Ví dụ: hình ảnh hiển thị rộng hơn khung hiển thị có thể gây ra hiện tượng cuộn ngang. Để ngăn điều này xảy ra, hãy điều chỉnh nội dung cho vừa với khung hiển thị.
Kích thước của nội dung không phù hợp với khung nhìn. Thao tác kiểm tra của Lighthouse có thể giúp bạn tự động hoá quy trình phát hiện nội dung tràn.
Hình ảnh
Một hình ảnh có kích thước cố định sẽ khiến trang cuộn nếu lớn hơn khung hiển thị. Bạn nên đặt max-width cho tất cả hình ảnh là 100%. Việc này sẽ thu nhỏ hình ảnh cho 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 trường hợp, bạn có thể thực hiện việc này bằng cách thêm nội dung 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 các thuộc tính width và height vào thẻ <img> để trình duyệt có thể dành sẵn không gian cho hình ảnh trước khi tải. Điều này giúp ngăn chặn sự thay đổi bố cục.
Bố cục
Vì kích thước và chiều rộng màn hình tính bằng pixel CSS rất khác nhau 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), nên nội dung không được dựa vào một chiều rộng khung nhìn cụ thể để hiển thị tốt.
Trước đây, bạn phải thiết lập các phần tử bố cục theo tỷ lệ phần trăm. Việc sử dụng các phép đo bằng pixel đòi hỏi người dùng phải 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ỏ, 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 việc tạo các lưới linh hoạt này trở nên dễ dàng hơn nhiều.
Flexbox
Sử dụng Flexbox khi bạn có một nhóm các mục có kích thước khác nhau và bạn muốn chúng vừa khít trong một hoặc nhiều hàng, trong đó các mục nhỏ hơn chiếm ít không gian hơn và 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ể dùng Flexbox để hiển thị các mục dưới dạng một hàng duy nhất hoặc được bao bọc trên 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ụ nổi trước đó bằng cách sử dụng bố cục lưới và đơn vị fr. Đơn vị này biểu thị 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ể dùng lưới để tạo bố cục lưới thông thường với nhiều mục nhất có thể. Số lượng bản nhạc 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ẻ nhất có thể trên 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 đây, 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 để có khả năng thích ứng
Đôi khi, bạn có thể cần thực hiện những 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 mà các kỹ thuật được mô tả trước đó không cho phép. Đây là lúc truy vấn nội dung nghe nhìn trở nên hữu ích.
Truy vấn 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. Chúng 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à việc 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 đến một loại đầu ra và đưa một 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ể dùng truy vấn nội dung nghe nhìn để đưa các kiểu in vào biểu định 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ị, vì vậy, 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ể. Các truy vấn về kích thước màn hình có thể kiểm thử những điều sau:
width(min-width,max-width)height(min-height,max-height)orientationaspect-ratio
Truy vấn nội dung nghe nhìn dựa trên tính năng của thiết bị
Với nhiều loại thiết bị hiện có, nhà phát triển không thể giả định 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ố điểm bổ sung mới hơn cho quy cách truy vấn nội dung nghe nhìn cho phép bạn kiểm tra 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ỏ lên các phần tử hay không.
hoverpointerany-hoverany-pointer
Hãy thử xem bản minh hoạ này trên nhiều thiết bị, chẳng hạn như máy tính thông thường và điện thoại hoặc máy tính bả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 cho hover, any-hover, pointer và any-pointer.
Sử dụng any-hover và any-pointer
Các tính năng any-hover và any-pointer 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 không, hoặc có thể sử dụng con trỏ hay không, ngay cả khi đó không phải là cách chính để họ tương tác với thiết bị. Hãy hết sức cẩn thận khi sử dụng các thao tác này, ví dụ: để tránh buộc người dùng màn hình cảm ứng chuyển sang 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 đang 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 điểm ngắt dựa trên các lớp thiết bị hoặc bất kỳ sản phẩm, tên thương hiệu hay hệ điều hành nào. Điều này khiến mã của bạn khó duy trì. Thay vào đó, hãy để nội dung xác định cách bố cục của nội dung thay đổi để phù hợp 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 lên
Thiết kế nội dung cho phù hợp với kích thước màn hình nhỏ trước, sau đó mở rộng màn hình cho đến khi cần có một điểm ngắt. Điều này giú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.
Ví dụ sau đây sẽ trình bày ví dụ về tiện ích dự báo thời tiết ở đầu trang này. Bước đầu tiên là làm cho bản 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ử để tiện ích trông đẹp mắt. Quyết định này mang tính chủ quan, nhưng chắc chắn là 600px
quá rộng.
Để chèn một điểm ngắt tại 600px, hãy tạo 2 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 lớn 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 phương tiện cho một max-width có 600px, hãy thêm CSS chỉ dành cho màn hình nhỏ. Bên trong truy vấn nội dung nghe nhìn cho min-width của 601px, hãy thêm CSS cho màn hình lớn hơn.
Chọn các điểm ngắt phụ khi cần thiết
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à nhiệt độ thấp để chúng nằm trên cùng một dòng và tăng kích thước của các biểu tượng thời tiết.
@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 điều khiển 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
Lý thuyết về khả năng đọc cổ điển cho rằng một cột lý tưởng nên 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 việc thêm một đ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 quá khoảng 10 từ.
Trong ví dụ này, phông chữ Roboto ở 1em tạo ra 10 từ trên 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 trình duyệt lớn hơn 575px, thì chiều rộng nội dung lý tưởng 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 tuỳ thuộc vào kích thước màn hình. Đừng ẩn nội dung chỉ vì bạn không thể đưa nội dung đó vào 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 bản dự báo thời tiết có thể là một vấn đề nghiêm trọng đối với những người bị dị ứng vào mùa xuân vì họ cần thông tin đó để quyết định xem có thể ra ngoài hay không.
Xem các điểm ngắt truy vấn nội dung nghe nhìn trong Công cụ dành cho nhà phát triển của Chrome
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ể thay đổi kích thước cửa sổ trình duyệt để kích hoạt các điểm ngắt, nhưng Công cụ cho nhà phát triển của Chrome có một tính năng tích hợp sẵn cho biết giao diện của một trang trong các điểm ngắt khác nhau.
Cách xem trang của bạn ở các điểm ngắt khác nhau:
- Mở Công cụ cho nhà phát triển.
- Bật Chế độ thiết bị. Theo mặc định, chế độ này sẽ mở ở chế độ thích ứng.
- Để 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 Hiển thị truy vấn nội dung nghe nhìn. Điều này cho thấy các điểm ngắt của bạn 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 phương tiệ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 đó.