Thông tin cơ bản về thiết kế web đáp ứng

Cách tạo trang web đáp ứng nhu cầu và khả năng của thiết bị mà người dùng sử dụng để xem trang web.

Việc sử dụng các thiết bị di động để lướt web tiếp tục gia tăng với tốc độ chóng mặt. Các thiết bị này thường bị hạn chế bởi kích thước màn hình và đòi hỏi một cách tiếp cận khác đối với cách trình bày nội dung trên màn hình.

Thiết kế web thích ứng, ban đầu do Ethan Marcotte trong A List Apart định nghĩa, đáp ứng nhu cầu của người dùng và thiết bị mà họ đang sử dụng. Bố cục thay đổi tuỳ theo kích thước và chức năng của thiết bị. Ví dụ: trên điện thoại, người dùng sẽ xem nội dung hiển thị trong một chế độ xem cột; máy tính bảng có thể hiển thị cùng một nội dung trong hai cột.

Trong video này, thiết kế di chuyển từ khung nhìn hẹp sang khung nhìn rộng, phù hợp với không gian màn hình hiện có.

Có vô số kích thước màn hình khác nhau trên điện thoại, "phablet", máy tính bảng, máy tính để bàn, máy chơi trò chơi, TV và thậm chí cả thiết bị đeo. Kích thước màn hình luôn thay đổi, vì vậy, điều quan trọng là trang web của bạn phải có khả năng thích ứng với mọi kích thước màn hình, hôm nay hoặc trong tương lai. Ngoài ra, mỗi thiết bị có những tính năng khác nhau mà chúng ta tương tác với chúng. Ví dụ: một số khách truy cập của bạn sẽ sử dụng màn hình cảm ứng. Thiết kế thích ứng hiện đại cân nhắc tất cả những yếu tố này để tối ưu hoá trải nghiệm cho mọi người.

Thiết lập khung nhìn

Các trang được tối ưu hóa cho nhiều thiết bị phải có thẻ meta viewport ở đầu tài liệu. Thẻ chế độ xem meta cung cấp cho trình duyệt hướng dẫn về 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 trên thiết bị di động sẽ hiển thị trang ở chiều rộng màn hình máy tính (thường là khoảng 980px, mặc dù điều này thay đổi theo các thiết bị), sau đó cố gắng làm cho nội dung trông đẹp hơn bằng cách tăng kích thước phông 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ó nghĩa là kích thước phông chữ có thể không nhất quán đối với người dùng. Họ có thể phải nhấn đúp hoặc chụm để thu phóng để 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ị meta viewport width=device-width sẽ hướng dẫn trang 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ị. Pixel độc lập với thiết bị (hay mật độ) là đại diện của một pixel, có thể trên màn hình có mật độ mật độ cao bao gồm nhiều pixel vật lý. Điều này cho phép trang chỉnh lại luồng nội dung cho phù hợp với nhiều kích thước màn hình, dù là hiển thị trên điện thoại di động nhỏ hay màn hình máy tính lớn.

Ảnh chụp màn hình một trang có văn bản rất khó đọc vì bị thu nhỏ.
Ví dụ về cách trang tải trong một thiết bị không có thẻ meta khung nhìn. Hãy xem ví dụ này về Nhiễu sóng.
Ảnh chụp màn hình của cùng một trang có văn bản ở kích thước có thể đọc được.
Ví dụ về cách trang tải trong một thiết bị có thẻ meta khung nhìn. Hãy xem ví dụ này về Nhiễu sóng.

Một số trình duyệt giữ nguyên chiều rộng của trang khi xoay sang chế độ ngang và thu phóng thay vì chỉnh lại luồng để lấp đầy màn hình. Việc thêm giá trị initial-scale=1 sẽ hướng dẫn các trình duyệt thiết lập 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ị, đồng thời cho phép trang tận dụng toàn bộ chiều rộng ngang.

Bài kiểm tra Không có thẻ <meta name="viewport"> với width hoặc initial-scale 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 đang sử dụng thẻ meta viewport đúng cách.

Đảm bảo một khung nhìn có thể truy cập

Ngoài việc thiết lập initial-scale, bạn cũng có thể đặt các thuộc tính sau đây trên khung nhìn:

  • minimum-scale
  • maximum-scale
  • user-scalable

Khi bạn đặt chính sách này, các thuộc tính này có thể vô hiệu hoá khả năng thu phóng khung nhìn của người dùng, do đó có khả năng gây ra các vấn đề về hỗ trợ tiếp cận. Do đó, bạn không nên sử dụng các thuộc tính này.

Đặ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 nhưng không 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ẽ mang lại trải nghiệm không tốt cho người dùng.

Khi phát triển một trang web dành cho thiết bị di động có thẻ meta viewport, bạn rất dễ vô tình tạo ra nội dung trang không phù hợp với khung nhìn được chỉ định. Ví dụ: một hình ảnh hiển thị có chiều rộng rộng hơn khung nhìn có thể khiến khung nhìn cuộn theo chiều ngang. Bạn nên điều chỉnh nội dung này cho vừa với chiều rộng của khung nhìn để người dùng không cần phải cuộn theo chiều ngang.

Bài kiểm tra Nội dung có kích thước không chính xác cho khung nhìn 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

Hình ảnh có kích thước cố định và nếu lớn hơn khung nhìn sẽ gây ra thanh cuộn. Một cách thông dụng để xử lý vấn đề này là cung cấp cho tất cả hình ảnh max-width của 100%. Điều này sẽ khiến hình ảnh thu nhỏ cho vừa với không gian của nó nếu kích thước khung nhìn nhỏ hơn hình ảnh. Tuy nhiên, vì max-width thay vì width100%, nên hình ảnh sẽ không bị kéo giãn lớn hơn kích thước tự nhiên. Nhìn chung, bạn nên thêm nội dung sau vào biểu định kiểu một cách an toàn để không bao giờ gặp vấn đề với hình ảnh gây ra thanh cuộn.

img {
  max-width: 100%;
  display: block;
}

Thêm kích thước của hình ảnh vào phần tử img

Khi sử dụng max-width: 100%, bạn sẽ ghi đè kích thước tự nhiên của hình ảnh, tuy nhiên, bạn vẫn nên sử dụng các thuộc tính widthheight trong thẻ <img>. Lý do là các trình duyệt hiện đại sẽ sử dụng thông tin này để đặt trước không gian cho hình ảnh trước khi tải. Điều này giúp tránh việc thay đổi bố cục khi nội dung tải.

Bố cục

Vì kích thước và chiều rộng màn hình tính theo pixel CSS khác nhau rất nhiều giữa các thiết bị (ví dụ: giữa các điện thoại, máy tính bảng và 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 cụ thể của khung nhìn để hiển thị tốt.

Trước đây, các phần tử cài đặt bắt buộc này được dùng để tạo bố cục theo tỷ lệ phần trăm. Trong ví dụ bên dưới, bạn có thể thấy bố cục hai cột với các phần tử nổi, có kích thước bằng pixel. Khi khung nhìn nhỏ hơn tổng chiều rộng của các cột, chúng ta phải cuộn theo chiều ngang để xem nội dung.

Ảnh chụp màn hình về bố cục hai cột, trong đó hầu hết cột thứ hai nằm ngoài khung nhìn
Một bố cục nổi sử dụng pixel. Hãy xem ví dụ này về Nhiễu sóng.

Bằng cách sử dụng tỷ lệ phần trăm cho chiều rộng, các cột luôn giữ nguyên tỷ lệ phần trăm nhất định của vùng chứa. Điều này có nghĩa là các cột trở nên hẹp hơn thay vì tạo ra thanh cuộn.

Các kỹ thuật bố cục CSS hiện đại như Flexbox, Grid Layout (Bố cục lưới) và Multicol (Nhiều màu) giúp việc tạo các lưới linh hoạt này dễ dàng hơn nhiều.

Hộp linh hoạt

Phương thức bố cục này lý tưởng khi bạn có một tập hợp các mục có kích thước khác nhau và muốn các mục đó nằm vừa vặn trên một hàng hoặc nhiều hàng, với các mục nhỏ 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;
}

Trong thiết kế thích ứng, 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 đi.

Đọc thêm về Flexbox.

Bố cục lưới CSS

Bố cục lưới CSS cho phép tạo đơn giản các lưới linh hoạt. Nếu xem xét ví dụ nổi trước đó, thay vì tạo các cột theo tỷ lệ phần trăm, chúng ta có thể 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ể dùng Lưới để tạo bố cục lưới thông thường, với số lượng mục tuỳ ý. Số lượng bản nhạc có sẵn sẽ giảm xuống khi kích thước màn hình thu nhỏ. Trong bản minh hoạ bên dưới, chúng ta có số lượng thẻ phù hợp trên mỗi hàng với kích thước tối thiểu là 200px.

Đọc thêm về Bố cục lưới CSS

Bố cục nhiều cột

Đối với một số loại bố cục, bạn có thể dùng Bố cục nhiều cột (Multicol) để tạo số lượng cột thích ứng với thuộc tính column-width. Trong bản minh hoạ bên dưới, bạn có thể thấy các cột được thêm vào nếu còn chỗ cho một cột 200px khác.

Đọc thêm về Nhiều cột

Sử dụng các truy vấn phương tiện CSS để tăng khả năng phản hồi

Đôi khi, bạn cần thực hiện các thay đổi rộng hơn đối với bố cục để hỗ trợ một kích thước màn hình nhất định so với các kỹ thuật nêu trên cho phép. Đây là lúc các cụm từ tìm kiếm về nội dung nghe nhìn trở nên hữu ích.

Truy vấn nội dung đa phương tiện là các bộ lọc đơn giản có thể áp dụng cho kiểu CSS. Quảng cáo này giúp bạn dễ dàng thay đổi kiểu dựa trên loại thiết bị hiển thị nội dung hoặc các tính năng của thiết bị, ví dụ như chiều rộng, chiều cao, hướng, khả năng di chuột và việc 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ần nhắm mục tiêu một loại đầu ra để có thể thêm biểu định kiểu với các kiểu in như sau:

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="stylesheet" href="print.css" media="print">
    …
  </head>
  …

Ngoài ra, bạn có thể bao gồm các kiểu in trong biểu định kiểu chính của mình bằng cách sử dụng truy vấn phương tiện:

@media print {
  /* print styles go here */
}

Đối với thiết kế web thích ứng, chúng tôi thường truy vấn các tính năng của thiết bị để cung cấp một bố cục khác cho các màn hình nhỏ hơn hoặc khi chúng tôi phát hiện thấy khách truy cập đang sử dụng màn hình cảm ứng.

Truy vấn phương tiện dựa trên kích thước khung nhìn

Truy vấn nội dung nghe nhìn cho phép chúng tôi tạo trải nghiệm thích ứng, trong đó các kiểu cụ thể được áp dụng cho màn hình nhỏ, màn hình lớn và bất kỳ vị trí nào trên màn hình. Do đó, tính năng chúng ta đang phát hiện ở đây là kích thước màn hình. Chúng ta có thể kiểm thử những tính năng sau.

  • width (min-width, max-width)
  • height (min-height, max-height)
  • orientation
  • aspect-ratio

Tất cả các tính năng này đều hỗ trợ trình duyệt tuyệt vời, để biết thêm chi tiết, bao gồm thông tin hỗ trợ trình duyệt, hãy xem chiều rộng, chiều cao, hướngtỷ lệ khung hình trên MDN.

Truy vấn nội dung nghe nhìn dựa trên khả năng của thiết bị

Với phạm vi thiết bị hiện có, chúng tôi 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 người chỉ sử dụng màn hình cảm ứng trên một thiết bị nhỏ. Với một số nội dung bổ sung mới hơn cho quy cách truy vấn nội dung đa phương tiện, chúng ta có thể 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ể di chuột qua các phần tử hay không.

  • hover
  • pointer
  • any-hover
  • any-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 thông thường và điện thoại hoặc máy tính bảng.

Những tính năng mới này 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, di chuột bất kỳ, con trỏ, con trỏ bất kỳ.

Đang sử dụng any-hoverany-pointer

Các tính năng any-hoverany-pointer sẽ kiểm tra xem người dùng có thể di chuột hoặc sử dụng loại con trỏ đó ngay cả khi đó không phải là cách chính mà họ đang tương tác với thiết bị của mình. Hãy thật cẩn thận khi dùng những mã này. Buộc người dùng chuyển sang dùng chuột khi họ đang sử dụng màn hình cảm ứng không phải là cách hiệu quả! Tuy nhiên, any-hoverany-pointer có thể hữu ích nếu cần xác định loại thiết bị mà người dùng có. 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ỏ nhỏ, ngoài khả năng di chuột.

Cách chọn điểm ngắt

Đừng xác định điểm ngắt dựa trên lớp thiết bị. Việc xác định điểm ngắt dựa trên các thiết bị, sản phẩm, tên thương hiệu hoặc hệ điều hành cụ thể đang được sử dụng hiện nay có thể dẫn đến tình trạng khủng hoảng bảo trì. Thay vào đó, nội dung tự xác định cách bố cục điều chỉnh theo vùng chứa.

Chọn các điểm ngắt chính bằng cách bắt đầu từ quy mô nhỏ, sau đó tăng dần

Trước tiên, hãy thiết kế nội dung cho vừa với một kích thước màn hình nhỏ, sau đó mở rộng màn hình cho đến khi cần đến điểm ngắt. Điều này cho phép bạn tối ưu hoá các điểm ngắt dựa trên nội dung và duy trì số lượng điểm ngắt tối thiểu có thể.

Hãy xem xét ví dụ mà chúng ta đã thấy ở phần đầu: dự báo thời tiết. 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ỏ.

Ảnh chụp màn hình một ứng dụng thời tiết ở chiều rộng thiết bị di động
Ứng dụng có chiều rộng hẹp.

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ử và thông tin dự báo sẽ không hiển thị chính xác. Quyết định này có phần chủ quan, nhưng trên 600px chắc chắn là quá rộng.

Ảnh chụp màn hình một ứng dụng thời tiết có khoảng cách lớn giữa các mục
Ứng dụng tại thời điểm mà chúng tôi cho rằng nên điều chỉnh thiết kế.

Để 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 để sử dụng khi trình duyệt có kích thước từ 600px trở xuống và một để sử dụng khi trình duyệt 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 nghe nhì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 nghe nhì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 lớn khi bố cục thay đổi đáng kể, bạn cũng nên điều chỉnh các thay đổi nhỏ. Ví dụ: giữa các điểm ngắt chính, bạn nên điều chỉnh lề hoặc khoảng đệm trên một phần tử, hoặc tăng kích thước phông chữ để bố cục trông tự nhiên hơn.

Hãy bắt đầu bằng cách tối ưu hoá bố cục màn hình nhỏ. Trong trường hợp này, hãy tăng phông chữ khi chiều rộng khung nhìn lớn hơn 360px. Thứ hai, khi có đủ không gian, chúng ta có thể phân tách nhiệt độ cao và thấp để chúng nằm trên cùng một đường thay vì chồng lên nhau. Hãy cũng tăng kích thước các biểu tượng thời tiết một chú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;
  }
}

Tương tự, đối với màn hình lớn, tốt nhất 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 để không chiếm 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 cho việc đọc

Lý thuyết dễ đọc cổ điển cho thấy một cột lý tưởng nên chứa 70 đến 80 ký tự mỗi dòng (khoảng 8 đến 10 từ bằng tiếng Anh). Do đó, mỗi khi chiều rộng của khối văn bản vượt quá khoảng 10 từ, hãy cân nhắc thêm một điểm ngắt.

Ảnh chụp màn hình một trang văn bản trên thiết bị di động
Văn bản như được đọc trên thiết bị di động.
Ảnh chụp màn hình của một trang văn bản trong trình duyệt dành cho máy tính
Văn bản được đọc trên trình duyệt dành cho máy tính, có thêm một điểm ngắt để ràng buộc độ dài dòng.

Hãy xem xét kỹ hơn ví dụ về bài đăng trên blog ở trên. Trên màn hình nhỏ hơn, phông chữ Roboto tại 1em hoạt động hoàn hảo khi cung cấp 10 từ mỗi dòng, nhưng màn hình lớn hơn cần có đ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 việc chỉ ẩn nội dung

Hãy cẩn thận khi chọn nội dung sẽ ẩn hoặc hiển thị tuỳ thuộc vào kích thước màn hình. Đừng chỉ ẩn nội dung chỉ vì bạn không thể hiển thị nội dung vừa vặn trên màn hình. Kích thước màn hình không phải là chỉ báo chắc chắn cho biết người dùng có thể muốn gì. Ví dụ: việc loại bỏ số lượng phấn hoa khỏi 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 khi cần thông tin này để xác định xem họ có thể ra ngoài hay không.

Xem các điểm ngắt truy vấn phương tiện trong Công cụ của Chrome cho nhà phát triển

Sau khi thiết lập các điểm ngắt truy vấn nội dung nghe nhìn, bạn nên xem trang web của mình trông như thế nào với các điểm ngắt đó. 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, nhưng Công cụ của Chrome cho nhà phát triển có tính năng tích hợp sẵn giúp bạn dễ dàng xem trang hiển thị như thế nào ở các điểm ngắt khác nhau.

Ảnh chụp màn hình Công cụ cho nhà phát triển khi ứng dụng thời tiết của chúng tôi đang mở và chiều rộng được chọn là 822 pixel.
Công cụ cho nhà phát triển hiển thị ứng dụng thời tiết khi ứng dụng đó hiển thị ở kích thước khung nhìn rộng hơn.
Ảnh chụp màn hình Công cụ cho nhà phát triển khi ứng dụng thời tiết của chúng tôi đang mở và chiều rộng được chọn là 436 pixel.
Công cụ cho nhà phát triển hiển thị ứng dụng thời tiết khi ứng dụng đó hiển thị ở kích thước khung nhìn hẹp hơn.

Cách xem trang của bạn theo các điểm ngắt khác nhau:

Mở Công cụ cho nhà phát triển rồi bật Chế độ thiết bị. Theo mặc định, trang này sẽ mở ở chế độ thích ứng.

Để xem các truy vấn nội dung đa phương tiện của bạ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 để hiển thị các điểm ngắt dưới dạng các thanh 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 đa phương tiện.