CSS Media Query Là Gì, Hướng Dẫn CSS Media Query A – Z

CSS Media Query đã được giới thiệu cùng với việc triển khai đặc tả CSS3. Một truy vấn phương tiện liên kết việc gán các thuộc tính CSS của một phần tử với một hoặc nhiều điều kiện của phương tiện. Ở dạng đơn giản nhất, sự phân biệt được thực hiện giữa phương tiện mà thông tin được trình bày – ví dụ: trên màn hình, trang in (PDF) hoặc dưới dạng văn bản đọc:

CSS Media Query được xác định trong khối mã CSS bằng quy tắc “@ media” đặc biệt. Các bộ chọn CSS và các quy tắc có trong đó chỉ được kích hoạt trong điều kiện được chỉ định . Điều đó có nghĩa là bạn có thể ẩn các phần tử không hiển thị được khi in một trang:

/* Hide non-displayable elements */
@media print {
video, audio {
display: none;
}
}

Ngoài phương tiện được sử dụng, CSS Media Queries có thể được sử dụng để truy vấn các thuộc tính cụ thể của phương tiện tương ứng. Vì vậy, CSS Media Queries là một tính năng kỹ thuật trung tâm cho phép thiết kế web đáp ứng ngay từ đầu.

CSS Media Query như trung tâm kiểm soát element for responsive Cho website.

Thiết kế web đáp ứng nhằm mục đích điều chỉnh trang web một cách tối ưu nhất có thể với thiết bị được xem trên đó. Truy vấn phương tiện được sử dụng để truy vấn các thuộc tính khác nhau của thiết bị hiển thị, được gọi là media features. Điều này giúp bạn có thể đặt quy tắc kiểu cho các kích thước màn hình khác nhau. Hơn nữa, các quy tắc kiểu được tối ưu hóa có thể được xác định nếu thiết bị di động bị nghiêng.

Dưới đây là tổng quan về các tính năng đa phương tiện được sử dụng nhiều nhất cho thiết kế đáp ứng:

Media features.	Giải trình
Chiều rộng	Chiều rộng truy vấn của màn hình tính bằng pixel
Chiều cao	Chiều cao truy vấn của màn hình tính bằng pixel
định hướng	Phát hiện hướng màn hình dọc / ngang
Giải pháp	Phát hiện độ phân giải màn hình khả dụng

Hãy xem một vài ví dụ. Hãy tưởng tượng dòng tiêu đề chính cho một trang web. Trong HTML, nó được ký hiệu là “h1”. Đầu tiên, chúng tôi xác định các quy tắc kiểu cho phần tử h1 bất kể thiết bị hiển thị nó là gì :

h1 {
font-size: 24px;
line-height: 1.25;
}

Tiếp theo, chúng tôi xác định một truy vấn phương tiện truy vấn chiều rộng của màn hình . Trong truy vấn, chúng tôi xác định các quy tắc kiểu sẽ áp dụng cho tiêu đề theo chiều rộng. Trong ví dụ dưới đây, chúng tôi muốn tăng kích thước phông chữ của tiêu đề h1 trên màn hình có chiều rộng ít nhất là 1.024 pixel:

@media screen and (min-width: 1024px) {

h1 {
font-size: 36px;
}
}

Lưu ý rằng chúng tôi chỉ điều chỉnh thuộc tính “font-size” của tiêu đề h1. Khoảng cách dòng được xác định là một đơn vị tương đối bằng cách sử dụng thuộc tính “line-height” và – vì nó không bị ghi đè rõ ràng – được kế thừa. Trong ví dụ này, khoảng cách dòng của phần tử h1 ở trạng thái cơ bản là 24px * 1.25 = 30px. Trên màn hình có chiều rộng từ 1.024 pixel trở lên, khoảng cách dòng theo tỷ lệ 36px * 1.25 = 45px.

Trong “CSS”, sự pha trộn các quy tắc kiểu hiện có và mới được xác định được thể hiện bằng từ “xếp tầng”: một phần tử kế thừa các quy tắc kiểu từ các phần tử mẹ hoặc các quy tắc chung đã được xác định trước . Thông thường, bạn xác định các thuộc tính cơ bản của các phần tử và sau đó ghi đè có chọn lọc các thuộc tính trong các điều kiện nhất định.

Hãy xem một ví dụ khác. Hãy tưởng tượng chúng ta muốn hiển thị ba phần tử trong một vùng chứa. Các phần tử này sẽ được hiển thị bên dưới phần tử kia trên màn hình của thiết bị di động khi thiết bị được giữ thẳng đứng. Khi nghiêng thiết bị sang định dạng ngang, bố cục nên chuyển đổi để các phần tử được hiển thị cạnh nhau . Với module Flexbox Layout và CSS Media Query, yêu cầu căn chỉnh của thiết bị, bố cục có thể được triển khai với một vài dòng HTML và CSS. Đầu tiên, chúng tôi xác định vùng chứa và các phần tử mà nó chứa trong HTML:

<div class="container">
<div class="element">…</div>
<div class="element">…</div>
<div class="element">…</div>
</div>

Chúng tôi cũng đặt các quy tắc CSS sau đây. Chúng tôi đặt thuộc tính “display: flex” trong vùng chứa và điều chỉnh có điều kiện thuộc tính “flex-direction” cho nó thông qua Truy vấn phương tiện CSS. Nếu thiết bị được giữ ở định dạng ngang, các phần tử được hiển thị thành một hàng bên cạnh nhau. Khi được sử dụng ở định dạng dọc, các phần tử được sắp xếp bên dưới phần tử kia thành một dòng:

.container {
display: flex;
}
/* Landscape format */
@media screen and (orientation: landscape) {
.container {
flex-direction: row;
}
}
/* Horizontal format */
@media screen and (orientation: portrait) {
.container {
flex-direction: column;
}
}

Ngoài kích thước màn hình và căn chỉnh của thiết bị, chúng tôi cũng có thể truy vấn độ phân giải vật lý của màn hình thông qua truy vấn phương tiện . Điều này được quan tâm đặc biệt để hiển thị hình ảnh pixel. Ví dụ, hãy tưởng tượng một logo có sẵn trong hai phiên bản – một được tối ưu hóa cho màn hình thấp và một cho màn hình có độ phân giải cao. Một mẹo đơn giản để hiển thị biểu trưng phù hợp cho từng loại là đặt cả hai biến thể trên trang. Chúng tôi sử dụng CSS Media Query để truy vấn độ phân giải của màn hình và ẩn phiên bản không bắt buộc bằng cách sử dụng “display: none”. Đoạn mã sau đây cho biết những gì có thể trông như thế nào trong mã HTML và CSS:

<!--—Image in high resolution ---->
<img class="logo--high-res" src="/img/logo-high-res.png" alt="Logo in high resolution">
<!--—Image in low resolution ---->
<img class="logo--low-res" src="/img/logo-low-res.png" alt="Logo in low resolution">
/* Hide high resolution image on low resolution screen */
@media (max-resolution: 149dpi) {
.logo--high-res {
display: none;
}
}
/* Hide low resolution image on high resolution screen */
@media (min-resolution: 150dpi) {
.logo--low-res {
display: none;
}
}

Kích hoạt chế độ xem có thể thay đổi để thiết kế đáp ứng

Trước đây, chúng ta đã nói về “màn hình” liên quan đến chiều rộng khả dụng của phương tiện đầu ra. Điều này đúng về mặt khái niệm, nhưng về mặt kỹ thuật thì không hoàn toàn như vậy. Trình duyệt hoạt động nội bộ với khái niệm “khung nhìn”. Để chiều rộng của khung nhìn tương ứng với chiều rộng của màn hình, cần có thông số kỹ thuật “meta-viewport” trong “<head>” của tài liệu HTML. Nếu không có thông tin này, trang sẽ hiển thị trên thiết bị di động giống như trên thiết bị máy tính để bàn, chỉ giảm đáng kể về kích thước tổng thể.

<head>
<!—Activate CSS Media Queries -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Hiểu các đơn vị CSS để thiết kế web đáp ứng

Với thiết kế web đáp ứng, các phần tử phải thích ứng với màn hình hiện có. Thông thường, đây là câu hỏi xác định kích thước của các phần tử trong các điều kiện khác nhau . Đặc tả CSS xác định nhiều đơn vị khác nhau; đơn vị đơn giản nhất là pixel. Ví dụ: hình ảnh 1080p có kích thước chiều rộng 1.920 pixel x chiều cao 1.080 pixel.

Pixel là một đơn vị tuyệt đối và theo định nghĩa không thích ứng với không gian có sẵn. Hãy xem một ví dụ về lý do tại sao điều này có thể có vấn đề. Giả sử một trang web chứa hình ảnh rộng 1.920 pixel. Nếu chúng tôi đặt chiều rộng hình ảnh thành giá trị này bằng cách sử dụng CSS, hiển thị có thể bị gián đoạn trên màn hình nhỏ. Hình ảnh sẽ tràn ra ngoài không gian có sẵn.

Dưới đây, chúng tôi xác định một hình ảnh trong HTML với thẻ “<img>”:

<img class="img-1080p" src="/image-1080p.png">
Chúng tôi sử dụng CSS để sửa chiều rộng thành 1.920 pixel:
.img-1080p {
width: 1920px;
}

Trong trường hợp này, sẽ tốt hơn nếu sử dụng một đơn vị tương đối thay vì pixel . Kể từ những ngày đầu của bố cục dựa trên bảng, CSS sử dụng tỷ lệ phần trăm làm đơn vị tương đối. Nếu chúng tôi đặt chiều rộng của hình ảnh thành “100%” bằng CSS, hình ảnh sẽ thích ứng linh hoạt với không gian có sẵn. Điều này hoạt động vì tỷ lệ phần trăm luôn tham chiếu đến phần tử bao quanh.

img {
width: 100%;
}

Giờ đây, chúng tôi đang tiến gần hơn đến mục tiêu điều chỉnh chiều rộng của hình ảnh với không gian có sẵn. Tuy nhiên, chúng tôi đã tạo ra một vấn đề mới: trên một màn hình rộng hơn 1.920 pixel, hình ảnh được hiển thị được phóng to và do đó bị pixel hóa. Do đó, chúng tôi cũng phải giới hạn chiều rộng tối đa của hình ảnh theo kích thước pixel thực của nó :

.img-1080p {
/* implicitly inherited from `img` */
/* width: 100%; */
max-width: 1920px;
}

Ngoài pixel và tỷ lệ phần trăm, CSS còn hiểu một số đơn vị khác. Các đơn vị tương đối em, rem và vw, vh rất hữu ích cho thiết kế đáp ứng . Bảng dưới đây cung cấp tổng quan nhanh về các đơn vị CSS phổ biến cho thiết kế đáp ứng:

Đơn vị CSS	Cách sử dụng
Rem	Kích thước phông chữ của nội dung văn bản, “chiều rộng tối đa” của các thành phần bố cục; “Chiều rộng” của các phần tử
%	“Chiều rộng” của hình ảnh và các yếu tố bố cục, có thể bị giới hạn bởi “chiều rộng tối đa”
vw, vh	Kích thước phông chữ của tiêu đề, văn bản chính, kích thước của các yếu tố lấp đầy màn hình
Em	Xác định các điểm ngắt, “chiều rộng tối đa” của các phần tử bố cục
Px	Xác định các điểm ngắt, “chiều rộng tối đa” của hình ảnh

Hiểu các truy vấn phương tiện nâng cao

Ngoài các truy vấn phương tiện đơn giản, có thể viết các CSS Media Queryphức tạp . Các toán tử logic “và”, “hoặc”, và “không” hữu ích cho phần này. Đây là một ví dụ về một truy vấn phức tạp:

@media screen and (min-width: 30em) and (orientation: landscape) { /* … */ }

Ngoài các tính năng đa phương tiện đã thiết lập có thể được truy vấn thông qua CSS Media Query, một số tính năng thú vị được lên kế hoạch cho các phiên bản CSS trong tương lai. Ví dụ: thông số kỹ thuật “CSS Media Querycấp 5” (CSS5) bao gồm các tùy chọn truy vấn mới sau (trong số các tùy chọn khác):

Tính năng Phương tiện	Giải trình
mức độ ánh sáng	Phát hiện độ sáng xung quanh
ưu tiên phối màu	Chọn bảng màu sáng hoặc tối
thích sự tương phản	Chọn chế độ tương phản cao

Với sự ra mắt của CSS5, dự kiến ​​sẽ có thêm các truy vấn vùng chứa . Sử dụng các quy tắc này, lần đầu tiên có thể liên kết các quy tắc kiểu phần tử với các thuộc tính của vùng chứa xung quanh chúng. Điều này có nghĩa là các truy vấn vùng chứa tương phản với Truy vấn phương tiện CSS, truy vấn các thuộc tính chung của thiết bị đang được hiển thị. Việc sử dụng các truy vấn vùng chứa sẽ cho phép xử lý các trường hợp đặc biệt mà JavaScript hoặc các truy vấn phương tiện phức tạp đã được sử dụng trước đó.

Hiểu các điểm ngắt CSS

Liên quan đến thiết kế web đáp ứng và Truy vấn phương tiện CSS, “điểm ngắt” thường được sử dụng. Điểm ngắt là chiều rộng màn hình được xác định mà một bộ quy tắc CSS được kích hoạt như được xác định bởi CSS Media Query. Bạn có thể hình dung các điểm ngắt trên một trang web bằng cách mở các công cụ dành cho nhà phát triển trong trình duyệt. Nếu chế độ xem đáp ứng đang hoạt động, các điểm ngắt được hiển thị dưới dạng thanh màu phía trên trang web thực tế.

Hiểu về thiết bị di động ưu tiên, bộ xử lý CSS và khung tiện ích CSS

Một phương pháp thiết kế web đáp ứng tốt nhất được công nhận là phương pháp ưu tiên thiết bị di động . Khi thiết kế và phát triển web theo cách tiếp cận này, các thông số kỹ thuật về kiểu dáng cho màn hình nhỏ nhất được đặt trước tiên . Những định nghĩa này tạo thành xương sống của thiết kế. Dựa trên điều này, một số điểm ngắt được thiết lập để tăng kích thước màn hình liên tục. Các quy tắc kiểu mới cho các phần tử được xác định có chọn lọc trong các điểm ngắt, do đó ghi đè các quy tắc hiện có cho màn hình nhỏ hơn.

Cách tiếp cận ưu tiên thiết bị di động rất dễ hiểu bằng cách xem khung tiện ích CSS “Tachyons”. Điều này xác định ba điểm ngắt theo mặc định: “không nhỏ”, “trung bình” và “lớn”:

/* Tachyons breakpoints */
/* 'not-small' breakpoint */
@media screen and (min-width: 30em) { /* … */ }
/* 'medium' breakpoint */
@media screen and (min-width: 30em) and (max-width: 60em) { /* … */ }
/* 'large' breakpoint */
@media screen and (min-width: 60em) { /* … */ }

Lưu ý rằng theo cách tiếp cận ưu tiên thiết bị di động, không có điểm dừng “nhỏ” riêng biệt. Chi tiết cho các thiết bị nhỏ được xác định đơn giản mà không có điểm ngắt.

Điểm ngắt Tachyons	Giải trình
không nhỏ	Bao gồm chiều rộng màn hình của các điểm ngắt “trung bình” và “lớn”
vừa phải	Bao phủ chiều rộng màn hình giữa các điểm ngắt “không nhỏ” và “lớn”
lớn	Chỉ bao gồm màn hình lớn

Quy tắc kiểu cho các phần tử được xác định trong các điểm ngắt và màn hình của chúng được điều chỉnh cho phù hợp với các kích thước màn hình khác nhau. Bạn có thể nhận thấy rằng sự tập trung của cơ sở mã CSS của một dự án web là có vấn đề . Thường nên thu thập tất cả các thuộc tính CSS của một phần tử trong một tệp riêng biệt.

Hiểu về bộ xử lý trước và sau CSS

Để mô-đun hóa mã CSS của một dự án, ban đầu, nhiều bộ xử lý trước CSS khác nhau đã được sử dụng. Bạn có thể đã quen với các ngôn ngữ Sass, Less hoặc Stylus. Với dự án Node.js PostCSS, một trình xử lý hậu kỳ CSS đã được thêm vào sau này. Tất cả các công nghệ được đề cập cho phép CSS Media Queries được đóng gói bên dưới một bộ chọn CSS . Bằng cách này, các quy tắc kiểu của một phần tử có thể được định nghĩa chung cho tất cả các điều kiện phương tiện. Đây là một ví dụ sử dụng bút cảm ứng:

Tệp bút stylus “text.styl” cho các thuộc tính văn bản:

// Mobile-first definitions
p
font-size: 16px
// Definitions for 'not-small' breakpoint
@media screen and (min-width: 30em)
font-size: 18px
Tệp Stylus 'link.styl' cho các thuộc tính liên kết:
// Mobile-first definitions
a
color: blue
// Definitions for 'not-small' breakpoint
@media screen and (min-width: 30em)
text-decoration: underline

Bộ xử lý trước của bút stylus sẽ dịch các tệp thành CSS và thu thập các quy tắc CSS Media Queryđược thụt lề trong một điểm ngắt duy nhất . Mã bút cảm ứng được hiển thị được dịch sang mã CSS sau:

/* Mobile-first definitions */
p {
font-size: 16px;
}
a {
color: blue;
}
/* Definitions for 'not-small' breakpoint */
@media screen and (min-width: 30em) {
p {
font-size: 18px;
}
a {
text-decoration: underline;
}
}

Hiểu các khung tiện ích CSS

Đóng gói các CSS Media Querytrong các quy tắc kiểu của một phần tử và xử lý chúng bằng bộ xử lý CSS hoạt động, nhưng nó buộc nhà phát triển phải chuyển đổi qua lại giữa HTML và CSS. Họ cũng cần gán tên lớp duy nhất cho các phần tử trong HTML. Nó dẫn đến sự phức tạp không mong muốn. Đây là nơi mà các khung công tác tiện ích CSS xuất hiện.

Khung tiện ích CSS liên kết các thuộc tính CSS nguyên tử với các điểm ngắt. Các lớp CSS kết quả có thể được gán cho bất kỳ phần tử nào trong HTML. Điều này giúp bạn có thể xác định các bố cục và thành phần đáp ứng chỉ trong HTML mà không cần phải viết mã CSS. Việc sử dụng khung tiện ích CSS cho phép tạo mẫu nhanh chóng và lý tưởng để phát triển các thành phần. Do đó, các khung tiện ích CSS thường được sử dụng cùng với các công nghệ hướng thành phần như React và Vue.

Hãy xem xét một ví dụ khác được mượn từ khung tiện ích CSS của Tachyon. Nhìn vào mã CSS sau đây. Đầu tiên, chúng tôi xác định các lớp “mw1” thành “mw3”, giới hạn chiều rộng tối đa của bất kỳ phần tử nào ở các giá trị giữa “1rem” và “3rem”. Hơn nữa, trong các điểm ngắt đã được giới thiệu “trung bình” và “lớn”, chúng tôi xác định các lớp CSS tương ứng có tên chứa các điểm ngắt viết tắt:

/* Tachyons */
/* Mobile-first size */
.mw1 { max-width: 1rem; }
.mw2 { max-width: 2rem; }
.mw3 { max-width: 3rem; }
/* 'medium' breakpoint */
@media screen and (min-width: 30em) and (max-width: 60em) {
.mw1-m { max-width: 1rem; }
.mw2-m { max-width: 2rem; }
.mw3-m { max-width: 3rem; }
}
/* 'large' breakpoint */
@media screen and (min-width: 60em) {
.mw1-l { max-width: 1rem; }
.mw2-l { max-width: 2rem; }
.mw3-l { max-width: 3rem; }
}

Sử dụng các lớp CSS này, chúng ta có thể viết các phần tử đáp ứng hoàn toàn bằng HTML. Đoạn mã HTML sau đây xác định hình ảnh có chiều rộng tối đa là “1rem” trên màn hình nhỏ. Hình ảnh tự động điều chỉnh theo chiều rộng màn hình có sẵn . Trên màn hình cỡ trung bình, phần tử chiếm tối đa “2rem”, trên màn hình lớn tối đa là “3rem”.

<img class="mw1 mw2-m mw3-l" src="/image.png" alt="A responsive image">

Các khung công tác tiện ích CSS xác định nhiều lớp nguyên tử , với mỗi lớp chỉ xác định một thuộc tính CSS. Ngoài kích thước của một phần tử, điều này bao gồm thông tin về kiểu chữ, màu sắc và tất cả các thuộc tính có thể hình dung khác. Đối với mỗi thuộc tính nguyên tử, một khung tiện ích CSS chứa các lớp cho mỗi điểm ngắt được xác định. Bằng cách kết hợp nhiều lớp, hầu hết mọi phần tử đáp ứng đều có thể được ghép lại với nhau.

Khung Tachyons hiện đã được vài năm và không còn được phát triển tích cực nữa. Tuy nhiên, vì tính đơn giản của nó, Tachyons vẫn là một cách tuyệt vời để học thiết kế web đáp ứng . Cách đơn giản nhất để hiểu cách tiếp cận là xem xét các thành phần của Tachyons . Đây là các phần tử ví dụ được xác định đầy đủ bằng cách sử dụng các lớp tiện ích.

Người kế nhiệm Tachyons là TailwindCSS . TailwindCSS có một số lợi thế hơn Tachyons. Dự án tiếp tục được phát triển tích cực và hỗ trợ nhiều hệ thống phổ biến để phát triển front-end. Hơn nữa, TailwindCSS hoàn toàn có thể được điều chỉnh cho phù hợp với các nhu cầu tương ứng của một dự án . Tất cả các cài đặt trước như điểm ngắt, tỷ lệ kích thước phông chữ, v.v., có thể được cấu hình dễ dàng.

Mặc dù làm việc với các khung công tác tiện ích CSS là thực tế, nhưng phương pháp này có một nhược điểm lớn : nhiều lớp nguyên tử có thể được yêu cầu để xác định một phần tử duy nhất. 

Tệp nguồn CSS cũng chứa các lớp cho tất cả các tổ hợp giá trị thuộc tính CSS và điểm ngắt theo mặc định. Trong trường hợp của TailwindCSS, có hàng nghìn lớp, có nghĩa là tệp CSS ở trạng thái không nén có thể tăng lên kích thước tệp vài megabyte – một kích thước không bền vững theo quan điểm hiệu suất.

May mắn thay, TailwindCSS khắc phục điều này theo hai cách. Mặt khác, khung công tác hiểu được lệnh “@ apply”, được sử dụng để kết hợp các tổ hợp các lớp tiện ích được sử dụng nhiều lần dưới một tên lớp mới. Mặt khác, TailwindCSS hỗ trợ công cụ PurgeCSS . Điều này được sử dụng như một phần của quá trình xây dựng để loại bỏ bất kỳ lớp tiện ích không sử dụng nào khỏi phiên bản sản xuất. 

PurgeCSS xử lý các mẫu HTML của dự án và chỉ bao gồm các lớp CSS được tìm thấy trong tệp văn bản nguồn CSS được tạo. Điều này làm giảm kích thước của tệp văn bản nguồn xuống mức có thể chấp nhận được.

Nguồn tham khảo bài viết: https://www.ionos.com/digitalguide/websites/web-design/css-media-queries/

Nếu bạn copy bài viết từ https://thietkewebcantho89.com/, vui lòng để nguồn https://thietkewebcantho89.com/css-media-query bạn nhé.