CSS - Truy vấn Media: Hướng dẫn cho người mới bắt đầu

Xin chào, các nhà phát triển web tương lai! Hôm nay, chúng ta sẽ khám phá thế giới đầyexciting của CSS Media Queries. Là một giáo viên máy tính gần gũi, tôi ở đây để hướng dẫn bạn từng bước trong hành trình này. Đừng lo lắng nếu bạn chưa bao giờ viết mã trước đây - chúng ta sẽ bắt đầu từ những điều cơ bản và dần dần nâng cao. Vậy, hãy lấy một tách cà phê (hoặc trà, nếu đó là sở thích của bạn), và chúng ta cùng bắt đầu!

CSS - Media Queries

Media Queries là gì?

Trước khi chúng ta nhảy vào chi tiết, hãy hiểu media queries là gì. Hãy tưởng tượng bạn đang thiết kế một trang web trông tuyệt vời trên máy tính của bạn. Nhưng điều gì sẽ xảy ra khi ai đó xem nó trên điện thoại của họ? Đó là lúc media queries phát huy tác dụng! Chúng cho phép trang web của bạn thích ứng với các kích thước màn hình và thiết bị khác nhau. Nó giống như có một trang web chameleon thay đổi ngoại hình dựa trên môi trường của nó.

Cú pháp

Bây giờ, hãy nhìn vào cú pháp cơ bản của một media query:

@media mediatype and (condition) {
/* CSS rules go here */
}

Đừng để điều này làm bạn hoảng hốt! Chúng ta sẽ phân tích nó:

@media: Điều này告诉浏览器, "Hey, tôi sắp đặt ra một số điều kiện!"
mediatype: Điều này chỉ định loại media chúng ta đang nhắm đến (chúng ta sẽ xem xét những điều này sớm).
and: Đây là cách chúng ta kết hợp các điều kiện.
(condition): Đây là nơi chúng ta đặt các điều kiện cụ thể.

Loại Media

Loại media告诉浏览器 chúng ta đang nhắm đến loại thiết bị nào. Dưới đây là các loại chính:

Loại Media	Mô tả
all	Áp dụng cho tất cả các thiết bị
print	Dành cho máy in
screen	Dành cho màn hình máy tính, máy tính bảng và điện thoại

Operator Logic

Chúng ta có thể sử dụng các operator logic để tạo ra các truy vấn phức tạp hơn:

Operator	Mô tả
and	Kết hợp nhiều tính năng media
not	Lật ngược một truy vấn media
only	Áp dụng các style chỉ khi toàn bộ truy vấn khớp
,	Kết hợp nhiều truy vấn media

CSS Media Type - All

Loại media all giống như một cây kéo đa năng - nó hoạt động cho tất cả các thiết bị. Dưới đây là một ví dụ:

@media all {
body {
background-color: lightblue;
}
}

Điều này đặt màu nền thành xanh lam cho tất cả các thiết bị. Đơn giản phải không?

CSS Media Type - Print

Loại media print hoàn hảo cho việc thiết kế các trang web khi ai đó muốn in chúng. Hãy xem nó trong hành động:

@media print {
body {
font-size: 12pt;
}
.no-print {
display: none;
}
}

Điều này tăng kích thước chữ để dễ đọc hơn và ẩn các phần tử có class no-print khi in.

CSS Media Type - Screen

Loại media screen có lẽ là loại bạn sẽ sử dụng thường xuyên nhất. Nó dành cho bất kỳ thiết bị màn hình nào. Dưới đây là một ví dụ:

@media screen and (max-width: 600px) {
.menu {
width: 100%;
}
}

Điều này làm cho menu chiếm toàn bộ-width của màn hình khi-width màn hình là 600px hoặc ít hơn.

CSS Media Type - With Comma

Chúng ta có thể nhắm đến nhiều loại media bằng cách sử dụng dấu phẩy. Nó giống như mời nhiều bạn bè đến dự tiệc:

@media screen, print {
body {
line-height: 1.5;
}
}

Điều này đặt line height cho cả screen và print media types.

CSS Media Type - With Only

Từ khóa only giống như một bảo vệ trong một câu lạc bộ. Nó đảm bảo rằng các trình duyệt cũ không hỗ trợ media queries không áp dụng các style:

@media only screen and (max-width: 600px) {
.container {
width: 100%;
}
}

CSS Media Queries - Range

Chúng ta cũng có thể chỉ định các phạm vi cho các điều kiện:

@media screen and (min-width: 600px) and (max-width: 900px) {
.sidebar {
display: none;
}
}

Điều này ẩn sidebar khi-width màn hình介于 600px và 900px.

Media Features

Media features cho phép chúng ta kiểm tra các đặc điểm cụ thể của thiết bị hoặc trình duyệt của người dùng. Dưới đây là một số.common ones:

Feature	Mô tả
width	Width của viewport
height	Height của viewport
aspect-ratio	Tỷ lệ giữa width và height
orientation	Landscape hoặc portrait
resolution	Độ phân giải của thiết bị

Creating Complex Media Query

Hãy kết hợp tất cả lại với một ví dụ phức tạp hơn:

@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {
.grid {
display: flex;
flex-wrap: wrap;
}
.grid-item {
width: 50%;
}
}

Điều này tạo một bố cục hai cột cho màn hình có hướng landscape介于 600px và 900px rộng.

CSS Media Queries - Combining Multiple Types or Features

Chúng ta có thể kết hợp nhiều loại hoặc tính năng sử dụng operator and:

@media screen and (min-width: 600px) and (max-width: 900px), print and (max-width: 600px) {
.content {
font-size: 14px;
}
}

Điều này áp dụng style cho màn hình介于 600px và 900px rộng, hoặc khi in trên giấy rộng до 600px.

CSS Media Queries - Testing For Multiple Queries

Đôi khi, chúng ta muốn áp dụng style nếu bất kỳ trong số někologue truy vấn là đúng. Chúng ta sử dụng dấu phẩy cho điều này:

@media (min-width: 600px), (orientation: landscape) {
.header {
position: sticky;
top: 0;
}
}

Điều này làm cho header dính nếu màn hình rộng ít nhất 600px hoặc ở chế độ landscape.

CSS Media Queries - Inverting a Query's Meaning

Từ khóa not cho phép chúng ta đảo ngược ý nghĩa của một truy vấn:

@media not all and (orientation: landscape) {
.sidebar {
float: left;
}
}

Điều này làm nổi sidebar trái trừ khi thiết bị ở chế độ landscape.

CSS Media Queries - Improving Compatibility With Older Browsers

Đối với các trình duyệt cũ không hỗ trợ media queries, chúng ta có thể cung cấp các style dự phòng:

.container {
width: 100%; /* Fallback for older browsers */
}

@media screen and (min-width: 600px) {
.container {
width: 80%;
}
}

Điều này đảm bảo một bố cục chấp nhận được ngay cả trên các trình duyệt không hiểu media queries.

Và thế là bạn đã bước đầu vào thế giới của responsive web design với CSS Media Queries. Nhớ rằng, thực hành là cách tốt nhất để hoàn thiện, vì vậy đừng ngại thử nghiệm với các khái niệm này. Chúc bạn may mắn trong việc viết mã!

Credits: Image by storyset