Trong thế giới ngày nay, khi người ta truy cập trang web từ nhiều thiết bị khác nhau như máy tính, điện thoại di động, hoặc máy tính bảng, việc đảm bảo trang web hiển thị đẹp và hiệu quả trên mọi loại thiết bị là cực kỳ quan trọng. Để giải quyết vấn đề này, CSS đã giới thiệu một công cụ mạnh mẽ - Media Queries.
1. Media Queries là gì?
Media Queries là một phần của CSS3 cho phép bạn điều chỉnh giao diện trang web của mình dựa trên các điều kiện như chiều rộng của màn hình, tỷ lệ khung hình, hoặc các thuộc tính khác của thiết bị hiển thị. Điều này giúp trang web trở nên linh hoạt và thân thiện với người dùng trên mọi loại thiết bị.
2. Sử dụng Media Queries
Media queries thường được sử dụng trong CSS, nhưng đôi khi chúng cũng có thể được sử dụng trong HTML và JavaScript.
📌 Trong HTML: sử dụng thẻ <link> với thuộc tính media_query để chỉ định tài liệu được liên kết sẽ được hiển thị trên thiết bị nào.
<html>
<head>
<!-- Áp dụng cho tất cả các thiết bị -->
<link rel="stylesheet" href="all.css" media="all" />
<!-- Áp dụng cho các thiết bị có chiều rộng tối thiểu 375px -->
<link rel="stylesheet" href="small.css" media="(min-width: 375px)" />
<!-- Áp dụng khi in -->
<link rel="stylesheet" href="print.css" media="print" />
</head>
<!-- ... -->
</html>
📌 Trong CSS: thường sử dụng @media, @import ít khi được sử dụng trong CSS.
/* Hiển thị trong khoảng từ 375px đến 767px (chiều rộng) */
@media only screen and (min-width: 375px) and (max-width: 767px) {
.card {
background: #ddd;
}
}
/* Áp dụng cho tất cả màn hình */
@import url('style.css') screen;
/* Áp dụng cho màn hình hướng dọc */
@import url('landscape.css') screen and (orientation: portrait);
/* Áp dụng khi in */
@import url('print.css') print;
📌 Trong JavaScript: có thể sử dụng media_query trong JavaScript bằng cách sử dụng phương thức window.matchMedia().
// Kiểm tra xem màn hình có chiều rộng tối đa 600px hay không
var isSmallScreen = window.matchMedia("(max-width: 600px)").matches;
if (isSmallScreen) {
// Thực hiện các hành động cho màn hình nhỏ
} else {
// Thực hiện các hành động cho màn hình lớn
}
3. Cú pháp
Cú pháp cơ bản của Media Queries trong CSS có dạng như sau:
@media [media type] (media feature) [operator] (media feature) {
/* CSS here */
}
3.1. media types
Trong Media Queries, bạn có thể sử dụng nhiều media types khác nhau để xác định điều kiện cho việc áp dụng kiểu CSS. Dưới đây là một số media types phổ biến:
all: Áp dụng cho tất cả các media types. Đây là giá trị mặc định nếu không có media types nào được chỉ định.
@media all {
/* styles here apply to all media types */
}
print: Áp dụng khi trang web được in hoặc xem trong chế độ xem trước khi in.
@media print {
/* styles here apply when printing */
}
screen: Áp dụng cho các thiết bị có màn hình, chẳng hạn như máy tính và điện thoại di động.
@media screen {
/* styles here apply to screen devices */
}
speech: Áp dụng cho các thiết bị đọc nội dung một cách nghe được, như screen readers. Điều này thay thế cho loại aural đã bị lược bỏ từ Media Queries Level 4 trở đi.
@media speech {
/* styles here apply to speech devices */
}
3.2. media feature
Media feature là những đặc tính của media mà bạn có thể sử dụng trong Media Queries để xác định điều kiện áp dụng kiểu CSS. Chúng ta đã biết nhiều ví dụ kết hợp màn hình với chiều rộng như min-width và max-width là những đặc tính có giá trị cụ thể.
Tuy nhiên, có nhiều "feature" khác chúng ta có thể kết hợp. Media Queries Level 4 nhóm 18 đặc tính media features thành 5 danh mục chính, bao gồm:
Đặc điểm của Viewport/Trang (Viewport/Page Characteristics)
| Đặc điểm | Tóm tắt | Giá trị | Được thêm mới ở |
width | Xác định chiều rộng của viewport. Điều này có thể là một số cụ thể (ví dụ: 400px) hoặc một khoảng (sử dụng min-width và max-width). | <length> | Media Queries Level 3 |
height | Xác định chiều cao của viewport. Điều này có thể là một số cụ thể (ví dụ: 400px) hoặc một khoảng (sử dụng min-height và max-height). | <length> | Media Queries Level 3 |
aspect-ratio | Xác định tỷ lệ khung hình (chiều rộng so với chiều cao) của viewport | <ratio> | Media Queries Level 3 |
orientation | Cách màn hình được hướng, như chiều dọc (portrait) hoặc chiều ngang (landscape) dựa trên cách thiết bị được quay. | portraitlandscape | Media Queries Level 3 |
overflow-block | Kiểm tra cách thiết bị xử lý nội dung tràn ra ngoài viewport theo hướng block, có thể là scroll (cho phép cuộn), optional-paged (cho phép cuộn và ngắt trang thủ công), paged (chia thành các trang), và none (không hiển thị). | scrolloptional-pagedpaged | Media Queries Level 4 |
overflow-inline | Kiểm tra xem nội dung tràn ra ngoài viewport theo hướng inline có thể cuộn không, đó là hoặc none (không cuộn) hoặc scroll (cho phép cuộn). | scrollnone | Media Queries Level 4 |
Ví dụ
min-width và max-width
/* Áp dụng khi chiều rộng từ 375px và tối đa 767px */
@media (min-width: 375px) and (max-width: 767px) {
/* style here */
}
range và discrete
/* Media Queries Level 4 giới thiệu các cú pháp mới, giống như trong toán học: lớn hơn (>), bé hơn (<) và bằng (=)*/
@media (400px <= width <= 700px) {
/* style here */
}
@media (width <= 700px) {
/* style here */
}
@media (width >= 700px) {
/* style here */
}
@media (width = 700px) {
/* style here */
}
aspect-ratio
@media (aspect-ratio: 16/9) {
/* Styles được áp dụng khi tỷ lệ khung hình là 16:9 */
body {
background-color: lightblue;
}
}
orientation
@media (orientation: portrait) {
/* Styles được áp dụng khi thiết bị được quay ở chế độ dọc (portrait) */
body {
background-color: #f0f0f0;
}
}
@media (orientation: landscape) {
/* Styles được áp dụng khi thiết bị được quay ở chế độ ngang (landscape) */
body {
background-color: #e0e0e0;
}
}
overflow-block
@media (overflow-block: scroll) {
/* Styles được áp dụng khi nội dung có thể cuộn theo chiều block */
body {
overflow-y: scroll;
}
}
overflow-inline
@media (overflow-inline: scroll) {
/* Styles được áp dụng khi nội dung có thể cuộn theo chiều inline */
body {
white-space: nowrap;
overflow-x: scroll;
}
}
Chất lượng hiển thị (Display Quality)
| Đặc điểm | Tóm tắt | Giá trị | Được thêm mới ở |
resolution | Xác định mật độ điểm ảnh mục tiêu của thiết bị | <resolution>infinite | Media Queries Level 4 |
scan | Xác định quy trình quét của thiết bị, cách thiết bị vẽ một hình ảnh lên màn hình (nơi interlace vẽ các dòng lẻ và chẵn xen kẽ, và progressive vẽ chúng tất cả theo chuỗi). | interlaceprogressive | Media Queries Level 4 |
grid | Xác định liệu thiết bị có sử dụng grid (1) hay màn hình bitmap (0) không | 0 = Bitmap1 = Grid | Media Queries Level 5 |
update | Kiểm tra tần suất mà thiết bị có thể thay đổi giao diện của nội dung (nếu có thể), với các giá trị bao gồm none, slow và fast. | slowfastnone | Media Queries Level 4 |
environment-blending | Một phương pháp để xác định môi trường bên ngoài của thiết bị, chẳng hạn như nơi tối hoặc quá sáng. | opaqueadditivesubtractive | Media Queries Level 4 |
Ví dụ
resolution
@media (resolution: 300dpi) {
/* Styles được áp dụng khi mật độ điểm ảnh của thiết bị là 300dpi */
img {
max-width: 100%;
height: auto;
}
}
@media (min-resolution: 150dpi) and (max-resolution: 600dpi) {
/* Styles được áp dụng khi mật độ điểm ảnh của thiết bị nằm trong khoảng từ 150dpi đến 600dpi */
body {
font-size: 18px;
}
}
scan
@media (scan: interlace) {
/* Styles được áp dụng khi thiết bị sử dụng quy trình quét xen kẽ (interlace) */
.background-pattern {
background-image: url('interlaced-pattern.png');
}
}
@media (scan: progressive) {
/* Styles được áp dụng khi thiết bị sử dụng quy trình quét tiến triển (progressive) */
.background-pattern {
background-image: url('progressive-pattern.png');
}
}
grid
@media (grid: 1) {
/* Styles được áp dụng khi thiết bị sử dụng lưới (grid) */
.layout-container {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
@media (grid: 0) {
/* Styles được áp dụng khi thiết bị sử dụng màn hình bitmap (0) */
.layout-container {
display: block;
}
}
update
@media (update: slow) {
/* Styles được áp dụng khi thiết bị có tần suất cập nhật giao diện nội dung chậm */
.animated-elements {
animation-duration: 2s;
}
}
@media (update: fast) {
/* Styles được áp dụng khi thiết bị có tần suất cập nhật giao diện nội dung nhanh */
.animated-elements {
animation-duration: 0.5s;
}
}
environment-blending
@media (environment-blending: additive) {
/* Styles được áp dụng khi thiết bị đang hoạt động trong môi trường chế độ blend cộng (additive) */
.background-overlay {
background-blend-mode: screen;
}
}
@media (environment-blending: subtractive) {
/* Styles được áp dụng khi thiết bị đang hoạt động trong môi trường chế độ blend trừ (subtractive) */
.background-overlay {
background-blend-mode: multiply;
}
}
Màu sắc (Color)
| Đặc điểm | Tóm tắt | Giá trị | Được thêm mới ở |
color | Xác định khả năng hỗ trợ màu của thiết bị, được biểu diễn dưới dạng số bit. Ví dụ, giá trị 12 tương đương với thiết bị hỗ trợ màu 12-bit, và giá trị 0 chỉ định không hỗ trợ màu sắc. | <integer> | Media Queries Level 4 |
color-index | Xác định số lượng giá trị mà thiết bị hỗ trợ. Điều này có thể là một số cụ thể (ví dụ: 10000) hoặc một khoảng (ví dụ: min-color-index: 10000, max-color-index: 15000), giống như với width. | <integer> | Media Queries Level 4 |
monochrome | Số bit mỗi pixel mà màn hình đơn sắc của thiết bị hỗ trợ, trong đó số 0 là không hỗ trợ màn hình đơn sắc. | <integer> | Media Queries Level 4 |
color-gamut | Xác định phạm vi màu được hỗ trợ bởi trình duyệt và thiết bị, có thể là srgb, p3 hoặc rec2020 | srgbp3rec2020 | Media Queries Level 4 |
dynamic-range | Kết hợp mức độ sáng, độ sâu màu và tỷ lệ tương phản được hỗ trợ bởi lớp video của trình duyệt và thiết bị người dùng. | standardhigh | Media Queries Level 5 |
inverted-colors | Kiểm tra xem trình duyệt hoặc hệ điều hành có được đặt để đảo ngược màu sắc không (có thể hữu ích để tối ưu hóa khả năng tiếp cận cho những người có vấn đề về thị lực liên quan đến màu sắc) | invertednone | Media Queries Level 5 |
Ví dụ
color
@media (color: 8) {
/* Styles được áp dụng khi thiết bị hỗ trợ màu 8-bit */
body {
background-color: #f00; /* Đỏ */
}
}
color-index
@media (color-index: 65536) {
/* Styles được áp dụng khi thiết bị hỗ trợ ít nhất 65536 giá trị màu */
body {
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
}
monochrome
@media (monochrome: 2) {
/* Styles được áp dụng khi thiết bị hỗ trợ màn hình đơn sắc 2-bit */
body {
color: black;
background-color: white;
}
}
color-gamut
@media (color-gamut: p3) {
/* Styles được áp dụng khi thiết bị hỗ trợ phạm vi màu P3 */
body {
background-color: #3498db; /* Màu xanh dương theo chuẩn P3 */
}
}
dynamic-range
@media (dynamic-range: high) {
/* Styles được áp dụng khi lớp video hỗ trợ mức độ sáng, độ sâu màu và tỷ lệ tương phản cao */
video {
filter: brightness(1.5);
}
}
inverted-colors
@media (inverted-colors: inverted) {
/* Styles được áp dụng khi trình duyệt hoặc hệ điều hành được đặt để đảo ngược màu sắc */
body {
filter: invert(1);
}
}
Tương tác (Interaction)
| Đặc điểm | Tóm tắt | Giá trị | Được thêm mới ở |
pointer | Giống như any-pointer nhưng kiểm tra xem cơ chế nhập chính là một con trỏ và nếu có độ chính xác của nó (với coarse là ít chính xác hơn, fine là chính xác hơn và none là không có con trỏ). | coarsefinenone | Media Queries Level 4 |
hover | Giống như any-hover nhưng kiểm tra xem cơ chế nhập chính (ví dụ: chuột hoặc cảm ứng) có cho phép người dùng di chuột qua các phần tử không. | hovernone | Media Queries Level 4 |
any-pointer | Kiểm tra xem thiết bị có sử dụng một con trỏ không, chẳng hạn như chuột hoặc bút, cũng như độ chính xác của nó (với coarse là ít chính xác hơn và fine là chính xác hơn). | coarsefinenone | Media Queries Level 4 |
any-hover | Kiểm tra xem thiết bị có khả năng di chuột qua các phần tử không, như với chuột hoặc bút không. Trong một số trường hợp hiếm, các thiết bị cảm ứng cũng có thể di chuột qua. | hovernone | Media Queries Level 4 |
Ví dụ
pointer
@media (pointer: fine) {
/* Styles được áp dụng khi cơ chế nhập chính là con trỏ chính xác (fine) */
button {
cursor: pointer;
border: 2px solid #3498db;
color: #3498db;
}
}
hover
@media (hover: hover) {
/* Styles được áp dụng khi cơ chế nhập chính cho phép di chuột qua các phần tử không */
a:hover {
text-decoration: underline;
}
}
any-pointer
@media (any-pointer: fine) {
/* Styles được áp dụng khi thiết bị sử dụng một con trỏ chính xác (fine) hoặc không sử dụng con trỏ nào */
input[type='text'] {
font-size: 16px;
}
}
any-hover
@media (any-hover: hover) {
/* Styles được áp dụng khi thiết bị có khả năng di chuột qua các phần tử không */
.tooltip:hover {
display: block;
}
}
Video Prefixed
Thông số kỹ thuật đề cập đến các trình duyệt người dùng, bao gồm cả TV, mà hiển thị video và đồ họa trên hai mặt phẳng riêng biệt có đặc điểm riêng của chúng. Các đặc điểm sau mô tả những mặt phẳng đó.
| Đặc điểm | Tóm tắt | Giá trị | Được thêm mới ở |
video-color-gamut | Mô tả phạm vi màu gần đúng được hỗ trợ bởi mặt phẳng video của trình duyệt và thiết bị người dùng | srgbp3rec2020 | Media Queries Level 5 |
video-dynamic-range | Kết hợp giữa độ sáng, độ sâu màu và tỷ lệ tương phản được hỗ trợ bởi mặt phẳng video của trình duyệt và thiết bị người dùng. | standardhigh | Media Queries Level 5 |
video-width | Chiều rộng của khu vực mặt phẳng video của màn hình đích | <length> | Media Queries Level 5 |
video-height | Chiều cao của khu vực mặt phẳng video của màn hình đích | <length> | Media Queries Level 5 |
video-resolution | Độ phân giải của khu vực mặt phẳng video của màn hình đích | <resolution>inifinite | Media Queries Level 5 |
Ví dụ
video-color-gamut
@media (video-color-gamut: p3) {
/* Styles được áp dụng khi mặt phẳng video hỗ trợ phạm vi màu P3 */
video {
filter: contrast(1.2);
}
}
video-dynamic-range
@media (video-dynamic-range: high) {
/* Styles được áp dụng khi mặt phẳng video hỗ trợ độ sáng, độ sâu màu và tỷ lệ tương phản cao */
video {
filter: brightness(1.5);
}
}
video-width
@media (video-width: 800px) {
/* Styles được áp dụng khi chiều rộng của khu vực mặt phẳng video là 800px */
video {
max-width: 100%;
}
}
video-height
@media (video-height: 600px) {
/* Styles được áp dụng khi chiều cao của khu vực mặt phẳng video là 600px */
video {
max-height: 100%;
}
}
video-resolution
@media (video-resolution: 1080p) {
/* Styles được áp dụng khi độ phân giải của khu vực mặt phẳng video là 1080p */
video {
filter: blur(2px);
}
}
Scripting
| Đặc điểm | Tóm tắt | Giá trị | Được thêm mới ở |
scripting | Kiểm tra xem thiết bị có cho phép kịch bản (ví dụ: JavaScript) không, nơi enabled cho phép kịch bản, initial-only chỉ khởi tạo lúc đầu | enabledinitial-only | Media Queries Level 5 |
Ví dụ
scripting
@media (scripting: enabled) {
/* Styles được áp dụng khi thiết bị hỗ trợ và cho phép thực thi kịch bản (JavaScript) */
body {
background-color: #f8f8f8;
}
}
@media (scripting: initial-only) {
/* Styles được áp dụng khi kịch bản chỉ được khởi tạo lúc đầu, không thể thực thi sau đó */
body {
background-color: #333;
color: #fff;
}
}
Sở thích người dùng (User Preference)
| Đặc điểm | Tóm tắt | Giá trị | Được thêm mới ở |
prefers-reduced-motion | Xác định xem cài đặt hệ thống của người dùng có được đặt để giảm chuyển động trên trang hay không, điều này là một kiểm tra khả năng tiếp cận tuyệt vời. | no-preferencereduce | Media Queries Level 5 |
prefers-reduced-transparency | Xác định xem cài đặt hệ thống của người dùng có ngăn chặn sự trong suốt giữa các phần tử không. | no-preferencereduce | Media Queries Level 5 |
prefers-contrast | Xác định xem cài đặt hệ thống của người dùng có được đặt để tăng hoặc giảm độ tương phản giữa các màu sắc hay không. | no-preferencehighlowforced | Media Queries Level 5 |
prefers-color-scheme | Xác định xem người dùng có ưa thích chủ đề màu sắc sáng hay tối không, đây là một cách nhanh chóng phổ biến để tạo giao diện "chế độ tối". | lightdark | Media Queries Level 5 |
forced-colors | Kiểm tra xem trình duyệt có hạn chế màu sắc có sẵn để sử dụng (đó là không hoặc active) không. | activenone | Media Queries Level 5 |
prefers-reduced-data | Xác định xem người dùng có ưa thích sử dụng ít dữ liệu hơn cho trang hay không. | no-preferencereduce | Media Queries Level 5 |
Ví dụ
prefers-reduced-motion
@media (prefers-reduced-motion: reduce) {
/* Styles được áp dụng khi người dùng đã đặt để giảm chuyển động trên trang */
* {
animation: none !important;
transition: none !important;
}
}
prefers-reduced-transparency
@media (prefers-reduced-transparency: reduce) {
/* Styles được áp dụng khi người dùng đã đặt để giảm trong suốt giữa các phần tử */
.transparent-element {
opacity: 1 !important;
}
}
prefers-contrast
@media (prefers-contrast: high) {
/* Styles được áp dụng khi người dùng đã đặt để tăng độ tương phản giữa các màu sắc */
body {
color: #000;
background-color: #fff;
}
}
@media (prefers-contrast: low) {
/* Styles được áp dụng khi người dùng đã đặt để giảm độ tương phản giữa các màu sắc */
body {
color: #555;
background-color: #eee;
}
}
prefers-color-scheme
@media (prefers-color-scheme: dark) {
/* Styles được áp dụng khi người dùng đổi sang chế độ tối (darkmode) */
body {
background-color: #333;
color: #fff;
}
}
forced-colors
@media (forced-colors: active) {
/* Styles được áp dụng khi trình duyệt hạn chế màu sắc có sẵn để sử dụng */
.low-vision-friendly {
background-color: #fff;
color: #000;
}
}
prefers-reduced-data
@media (prefers-reduced-data: reduce) {
/* Styles được áp dụng khi người dùng ưa thích sử dụng ít dữ liệu hơn cho trang */
img {
display: none;
}
}
Lỗi thời (Deprecated)
| Tên | Tóm tắt | Bị gỡ bỏ ở |
device-aspect-ratio | Tỷ lệ khung hình (chiều rộng so với chiều cao) của thiết bị xuất ra | Media Queries Level 4 |
device-height | Chiều cao của bề mặt thiết bị hiển thị các phần tử đã được render | Media Queries Level 4 |
device-width | Chiều rộng của bề mặt thiết bị hiển thị các phần tử đã được render | Media Queries Level 4 |
3.2. Toán tử
Trong các truy vấn media, chúng ta có thể sử dụng các toán tử logic tương tự như nhiều ngôn ngữ lập trình để chọn các media types dựa trên các điều kiện cụ thể. Quy tắc @media chính nó cũng là một toán tử logic, đang khẳng định rằng "nếu" các loại và tính năng sau đây khớp, thì thực hiện một số công việc.
Và (and)
Chúng ta có thể sử dụng toán tử and nếu muốn chọn màn hình trong một khoảng chiều rộng cụ thể:
/* Khớp với màn hình có chiều rộng từ 320px ĐẾN 768px */
@media screen and (min-width: 320px) and (max-width: 768px) {
.element {
/* Styles! */
}
}
Hoặc (or, được phân cách bằng dấu phẩy)
Chúng ta cũng có thể phân tách các tính năng bằng dấu phẩy như một cách sử dụng toán tử or để khớp với các tính năng khác nhau:
/*
Khớp với màn hình nơi người dùng sử dụng chủ đề tối hoặc màn hình có chiều rộng ít nhất 1200px
*/
@media screen and (prefers-color-scheme: dark), (min-width: 1200px) {
.element {
/* Styles! */
}
}
Không (not)
Có thể chúng ta muốn chọn các thiết bị dựa trên những gì chúng không hỗ trợ hoặc khớp. Ví dụ dưới đây sẽ loại bỏ màu nền của body khi thiết bị là máy in và chỉ có thể hiển thị một màu.
@media print and (not (color)) {
body {
background-color: none;
}
}
Các toán tử này cung cấp khả năng linh hoạt lớn trong việc xác định các điều kiện để áp dụng các quy tắc CSS chỉ khi cần thiết.
4. Một số tiền tố thường sử dụng trong media queries
Trong các media queries, có một số tiền tố thường được sử dụng để xác định các điều kiện và ràng buộc. Dưới đây là một số tiền tố phổ biến:
min- và max-: Được sử dụng để xác định giá trị tối thiểu và tối đa cho các thuộc tính như chiều rộng, chiều cao, độ phân giải, v.v.
/* Ví dụ với chiều rộng */
@media screen and (min-width: 600px) {
/* Styles áp dụng cho màn hình có chiều rộng tối thiểu là 600px */
}
@media screen and (max-width: 1200px) {
/* Styles áp dụng cho màn hình có chiều rộng tối đa là 1200px */
}
only: Ngăn chặn trình duyệt cũ không hiểu media queries mới và tránh những sự hiểu lầm.
@media only screen and (max-width: 600px) {
/* Styles áp dụng cho màn hình có chiều rộng tối đa là 600px */
}
not: Ngược lại với điều kiện xác định.
@media not screen and (min-width: 768px) {
/* Styles áp dụng cho màn hình không có chiều rộng tối thiểu là 768px */
}
and: Kết hợp nhiều điều kiện lại với nhau.
@media screen and (min-width: 600px) and (max-width: 1200px) {
/* Styles áp dụng cho màn hình có chiều rộng từ 600px đến 1200px */
}
, (comma): Dùng để tạo điều kiện OR, nơi một trong những điều kiện phải đúng.
@media screen and (orientation: portrait), print {
/* Styles áp dụng cho màn hình ở chế độ dọc hoặc trang in */
}
5. Kết luận
❗️ Tại sao Media Queries quan trọng?
Tăng trải nghiệm người dùng: Media Queries giúp đảm bảo rằng trang web của bạn sẽ hiển thị đúng trên mọi loại thiết bị, tăng cường trải nghiệm người dùng.
SEO tốt hơn: Google và các công cụ tìm kiếm khác đánh giá cao trang web có responsive design, điều này có thể cải thiện thứ hạng của bạn trên kết quả tìm kiếm.
Tiết kiệm băng thông: Bằng cách chỉ tải những phần cần thiết dựa trên điều kiện màn hình, bạn có thể giảm bớt lưu lượng mạng và tăng tốc độ tải trang.
Media Queries là một công cụ quan trọng không chỉ giúp trang web của bạn trông đẹp trên mọi thiết bị mà còn tối ưu hóa hiệu suất và tăng trải nghiệm người dùng. Hãy tích hợp chúng vào quy trình phát triển của bạn để có một trang web linh hoạt và mạnh mẽ.
🔗 Tham khảo từ các nguồn: