Thiết kế các trang web tương thích trên các thiết bị khác nhau là một bước quan trọng để đảm bảo rằng một trang web có thể truy cập được với nhiều người dùng khác nhau nhất có thể.

Đó là nơi xuất hiện các truy vấn phương tiện. Các truy vấn phương tiện CSS chỉ cho phép bạn áp dụng quy tắc CSS khi trình duyệt khớp với quy tắc mà bạn đã xác định. Vì vậy, bạn có thể xác định quy tắc chỉ áp dụng nếu người dùng đang xem trang web trên điện thoại thông minh.

Hướng dẫn này sẽ thảo luận, với các ví dụ, khái niệm cơ bản về thiết kế web đáp ứng, cách hoạt động của truy vấn phương tiện và cách thiết kế truy vấn phương tiện CSS của riêng bạn. Khi kết thúc việc đọc hướng dẫn này, bạn sẽ trở thành chuyên gia thiết kế các truy vấn phương tiện trong CSS.

Thiết kế web đáp ứng và Truy vấn phương tiện

Thiết kế web đáp ứng đề cập đến một tập hợp các phương pháp trong đó nhà phát triển tối ưu hóa biểu định kiểu trên trang web để trang web có thể được hiển thị chính xác trên nhiều loại thiết bị và kích thước màn hình khác nhau.

Lý do mà thiết kế web đáp ứng rất quan trọng là thiết bị đầu ra mà người xem sử dụng để xem trang web — và cửa sổ trình duyệt và kích thước màn hình — sẽ ảnh hưởng đến cách tải trang web. Nếu một trang web không được thiết kế với các thiết bị và kích thước màn hình khác nhau, thì một số người dùng có thể gặp khó khăn khi xem tất cả nội dung được hiển thị trên trang web.

Trong khi thiết kế web đáp ứng bao gồm một loạt các phương pháp — từ sử dụng flexbox đến các kiểu tương đối — truy vấn phương tiện là một phần quan trọng của bất kỳ trang web nào được thiết kế với tính năng đáp ứng web.

Truy vấn phương tiện cho phép bạn điều chỉnh cách các kiểu hiển thị trên trang web tùy thuộc vào loại thiết bị được sử dụng, hướng của thiết bị và kích thước cửa sổ xem.

Bằng cách sử dụng truy vấn phương tiện, bạn có thể làm cho các phần tử xuất hiện khác nhau trên trang web của mình dựa trên các màn hình và thiết bị khác nhau mà qua đó người dùng đang xem trang web của bạn.

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

Cú pháp truy vấn phương tiện

Để khai báo một truy vấn phương tiện trong CSS, bạn cần sử dụng @media qui định. Quy tắc này cho phép bạn thực thi một khối thuộc tính CSS chỉ khi một điều kiện nhất định được đánh giá là true.

Đây là cú pháp cơ bản cho truy vấn phương tiện CSS:

@media media-type and (media-rule) {
	// CSS styles
}

Dưới đây là các thành phần chính của truy vấn phương tiện này:

• @media hướng dẫn trình duyệt tạo truy vấn phương tiện.
• loại phương tiện là loại phương tiện mà mã sẽ được sử dụng (tức là màn hình hoặc bản in).
• và là một toán tử logic mà chúng ta cần sử dụng khi chỉ định cả loại phương tiện và quy tắc phương tiện.
• quy tắc phương tiện là câu lệnh phải đánh giá thành true để CSS trong truy vấn phương tiện thực thi.
• Kiểu CSS là các quy tắc sẽ được áp dụng cho phần tử web nếu quy tắc phương tiện đánh giá là true.

Có bốn loại phương tiện có thể được sử dụng với truy vấn phương tiện. Đây là tất cả, bản in, màn hình và bài phát biểu. Theo mặc định, giá trị all được sử dụng và nhiều loại phương tiện có thể được chỉ định bằng cách sử dụng dấu phẩy phân tách từng loại.

Quy tắc phương tiện CSS

Có một số loại quy tắc có thể được áp dụng cho truy vấn phương tiện. Hãy chia nhỏ từng điều này một cách riêng lẻ.

Chiều rộng và Chiều cao

Các loại quy tắc chính được sử dụng với quy tắc phương tiện CSS là chiều rộng và chiều cao của thiết bị. Các quy tắc này cho phép chúng tôi áp dụng các kiểu cho một phần tử web tùy thuộc vào kích thước của vùng chứa khung nhìn. Thuật ngữ viewport container đề cập đến khu vực của một trang web hiển thị cho người dùng.

Quy tắc chiều rộng và chiều cao được sử dụng để áp dụng một kiểu nếu chế độ xem chính xác bằng một kích thước nhất định. Vì vậy, nếu bạn muốn thay đổi màu văn bản của tất cả các thẻ

trên trang web thành màu xanh lam nếu chế độ xem cao 500px, bạn có thể làm như vậy bằng cách sử dụng quy tắc sau:

@media screen and (width: 500px) {
	p {
		color: blue;
	}
}

Quy tắc này đặt màu văn bản của tất cả các thẻ

thành blue nếu chiều rộng của khung nhìn chính xác là 500px.

Tuy nhiên, trong hầu hết các trường hợp, bạn sẽ muốn áp dụng truy vấn phương tiện bằng cách sử dụng phạm vi. Vì vậy, ví dụ:bạn có thể muốn thay đổi kích thước phông chữ của trang web nếu kích thước khung nhìn bằng hoặc lớn hơn 500px. Đó là nơi xuất hiện các kiểu chiều rộng tối thiểu và chiều cao tối thiểu.

Nếu chúng tôi muốn thay đổi màu văn bản của tất cả các phần tử

thành màu xanh lam nếu chiều rộng khung nhìn bằng lớn hơn 500px, chúng tôi có thể sử dụng quy tắc sau:

@media screen and (min-width: 500px) {
	p {
		color: blue;
	}
}

Quy tắc này đặt màu văn bản của tất cả các phần tử

thành màu xanh lam, nhưng chỉ khi chiều rộng khung nhìn bằng hoặc lớn hơn 500px. Cách hoạt động của truy vấn phương tiện này là điều kiện min-width:500px được đánh giá, điều kiện này sẽ kiểm tra xem chiều rộng khung nhìn có bằng hoặc lớn hơn 500px hay không. Nếu điều kiện này đánh giá là true, các quy tắc trong p của chúng tôi phong cách được áp dụng cho trang web.

Định hướng

Ngoài ra, các truy vấn phương tiện có thể được sử dụng để áp dụng các kiểu cho một trang web tùy thuộc vào hướng của thiết bị.

Giả sử chúng ta muốn đặt kích thước văn bản của tất cả các phần tử h2 thành 20px nếu người dùng đang xem trang web của chúng ta ở chế độ ngang. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:

@media (orientation: landscape) {
	h2 {
		font-size: 20px;
	}
}

Quy tắc này kiểm tra xem người dùng có đang xem trang web ở chế độ ngang hay không và đặt kích thước phông chữ của tất cả các phần tử

thành 20px nếu điều kiện đó đánh giá là true.

Theo mặc định, máy tính để bàn sử dụng hướng ngang.

Ví dụ về truy vấn phương tiện CSS

Hãy xem qua hai truy vấn phương tiện ví dụ để minh họa cách bạn có thể viết các truy vấn phương tiện của riêng mình trong CSS.

Ví dụ về truy vấn phương tiện cơ bản:Ẩn phần tử

Giả sử chúng tôi đang thiết kế một trang web và chúng tôi muốn có một hộp xuất hiện hiển thị This site is in beta . trên tất cả các thiết bị di động. Hộp này sẽ chỉ xuất hiện trên thiết bị di động vì chúng tôi vẫn đang thử nghiệm trải nghiệm di động của mình.

Chúng tôi có thể tạo hộp này bằng mã sau:

<html>

<p class="betaBox">This site is in beta.</p>
<html>
  
<style>

.betaBox {
	background-color: orange;
	padding: 10px;
}
<style>
@media screen and (max-width: 600px) {
	.betaBox {
		display: none;
	}
}

Mã của chúng tôi trả về:

Hãy chia nhỏ mã của chúng ta. Trong tệp HTML của chúng tôi, chúng tôi đã xác định một thẻ

bao gồm văn bản This site is in beta . Lớp được gán cho thẻ

là betaBox .

Trong tệp CSS của chúng tôi, chúng tôi đã chỉ định hai kiểu. Kiểu .betaBox đặt màu nền của bất kỳ phần tử nào có tên lớp betaBox sang màu cam và tạo khoảng đệm 10px giữa nội dung của phần tử và đường viền của nó.

Quy tắc tiếp theo sử dụng truy vấn phương tiện. Trong truy vấn phương tiện của chúng tôi, max-width:600px cho trình duyệt của chúng tôi biết rằng quy tắc kiểu chỉ nên được áp dụng nếu chế độ xem hẹp hơn 600px. Vì vậy, nếu người dùng xem trang web của chúng tôi trên thiết bị di động, kiểu này sẽ được gọi.

Nếu truy vấn phương tiện của chúng tôi được thực thi, quy tắc display:none được áp dụng cho mọi phần tử có tên lớp .betaBox .

Ví dụ về nhiều truy vấn phương tiện:Kích thước phông chữ

Trong ví dụ trước của chúng tôi, chúng tôi chỉ chỉ định một truy vấn phương tiện. Tuy nhiên, bạn có thể chỉ định nhiều truy vấn phương tiện trong một tệp CSS, có nghĩa là bạn có thể áp dụng các kiểu nhất định cho một phần tử trên trang web tùy thuộc vào việc một trong nhiều điều kiện có được đáp ứng hay không.

Giả sử chúng ta đang thiết kế một trang web và chúng ta muốn kích thước phông chữ của tiêu đề

thay đổi tùy thuộc vào kích thước màn hình. Dưới đây là các quy tắc chúng tôi muốn áp dụng cho trang web của mình:

• Nếu chiều rộng của màn hình bằng hoặc nhỏ hơn 480px, thì kích thước phông chữ của tiêu đề phải là 16px.
• Nếu chiều rộng của màn hình bằng 481px và bằng hoặc nhỏ hơn 600px, thì kích thước phông chữ của tiêu đề phải là 20px.
• Nếu chiều rộng của màn hình bằng hoặc lớn hơn 601px, thì kích thước phông chữ tiêu đề phải là 24px.

Chúng tôi có thể sử dụng ba truy vấn phương tiện sau để thay đổi kích thước phông chữ trên trang web của mình tùy thuộc vào kích thước màn hình của người dùng:

<html>

<h1>This is an example header.</h1>
<html>
  
<style>

@media screen and (min-width: 480px) {
	h1 {
		font-size: 16px;
	}
}

@media screen and (min-width: 481px) and (max-width: 600px) {
	h1 {
		font-size: 20px;
	}
}

@media screen and (min-width: 601px) {
	h1 {
		font-size: 24px;
	}
}
<style>

nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.

Hãy phân tích cách mã của chúng ta hoạt động. Trong tệp HTML của mình, chúng tôi đã xác định tiêu đề mẫu bằng thẻ

hiển thị văn bản This is an example header .

Sau đó, trong tệp CSS của chúng tôi, chúng tôi đã xác định ba truy vấn phương tiện.

Truy vấn phương tiện đầu tiên kiểm tra xem kích thước của chế độ xem trình duyệt có bằng hoặc nhỏ hơn 480px (sử dụng max-width:480px) hay không và đặt kích thước phông chữ của tất cả các phần tử

thành 16px nếu câu lệnh này đánh giá là true.

Truy vấn phương tiện thứ hai kiểm tra xem kích thước của chế độ xem có bằng hoặc lớn hơn 481px (sử dụng min-width:481px) và bằng hoặc nhỏ hơn 600px (sử dụng max-width:600px) hay không. Nếu giá trị này là true, thì kích thước phông chữ cho tất cả các phần tử

được đặt thành 20px.

Truy vấn phương tiện thứ ba kiểm tra xem kích thước của chế độ xem có lớn hơn 601px (sử dụng min-width:601px) hay không. Nếu quy tắc này được đánh giá là true, thì kích thước phông chữ của tất cả các phần tử

sẽ được thay đổi thành 24px.

Điểm ngắt truy vấn phương tiện

Các điểm ngắt được sử dụng để đặt các điểm mà một trang web sẽ áp dụng một truy vấn phương tiện.

Khi bạn đang thiết kế một truy vấn phương tiện, bạn có thể tự đặt câu hỏi:tôi nên sử dụng kích thước nào để đặt các truy vấn phương tiện của mình? Đây là một câu hỏi hợp lý, bởi vì khi bạn mới bắt đầu với thiết kế web đáp ứng, bạn có thể gặp khó khăn trong việc tìm ra kích thước của các thiết bị mà trang web của bạn sẽ hiển thị trên đó.

Có danh sách trên internet nhắm mục tiêu các kích thước màn hình cụ thể, có thể hữu ích trong việc thiết lập các điểm ngắt cho các truy vấn phương tiện của bạn. Tuy nhiên, do có nhiều loại thiết bị - tất cả đều có kích thước màn hình và thông số kỹ thuật riêng - những danh sách này thường không bao gồm tất cả các điểm chính.

Cách tốt nhất để chọn thời điểm kích hoạt truy vấn phương tiện là xem qua trang web của bạn để tìm bất kỳ vị trí nào mà các phần tử bị bóp méo hoặc cắt xén. Vì vậy, nếu bạn thấy một phần tử không hiển thị đầy đủ trên thiết bị di động, bạn biết rằng bạn có thể cần thêm một điểm ngắt.

Sau đó, khi bạn đã xác định được những điểm này, bạn có thể viết các quy tắc phương tiện tùy chỉnh. Ví dụ:bạn có thể nhận ra rằng thẻ