4.1 Các khái niệm cơ bản
Biến CSS và media-queries cung cấp công cụ mạnh mẽ để tạo thiết kế web thích ứng, tự động điều chỉnh cho các kích thước màn hình và thiết bị khác nhau. Biến cho phép quản lý style từ trung tâm và media-queries cho phép thay đổi style tuỳ theo điều kiện như chiều rộng màn hình.
Các khái niệm cơ bản
- Biến CSS: cho phép thiết lập các giá trị có thể tái sử dụng trong toàn bộ mã CSS. Chúng có thể được thay đổi trong các ngữ cảnh khác nhau, chẳng hạn như media-queries, điều này đặc biệt hữu ích cho thiết kế thích ứng.
- Media-queries: cho phép áp dụng các style CSS dựa trên các đặc điểm của thiết bị, như chiều rộng hoặc chiều cao màn hình. Điều này cho phép điều chỉnh giao diện và hành vi của trang web cho các thiết bị khác nhau.
Sử dụng biến trong media-queries
Biến CSS có thể được sử dụng trong media-queries để thay đổi giá trị style dựa trên điều kiện. Điều này cho phép tạo ra các thiết kế linh hoạt hơn và dễ bảo trì.
Ví dụ sử dụng biến trong media-queries:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
@media (max-width: 600px) {
:root {
--main-bg-color: #e0e0e0;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--main-bg-color: #d0d0d0;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--main-bg-color: #f0f0f0;
--font-size: 16px;
}
}
<body>
<p>This is a paragraph with a link to <a href="#">Example.com</a>.</p>
</body>
Giải thích:
Trong ví dụ này, giá trị của các biến thay đổi tùy thuộc vào chiều rộng màn hình:
- Đối với màn hình có chiều rộng đến 600px, nền thay đổi sang sắc thái tối hơn và kích cỡ font nhỏ hơn.
- Đối với màn hình từ 601px đến 1200px, nền thay đổi sang sắc thái trung bình và kích cỡ font tăng nhẹ.
- Đối với màn hình hơn 1200px, các giá trị biến gốc được áp dụng.
4.2 Ví dụ về biến trong media-queries
Ví dụ 1: Khoảng cách và kích thước font thích ứng
:root {
--padding: 20px;
--font-size: 16px;
}
.container {
padding: var(--padding);
font-size: var(--font-size);
}
@media (max-width: 600px) {
:root {
--padding: 10px;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--padding: 15px;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--padding: 20px;
--font-size: 16px;
}
}
<div class="container">
<p>This is a responsive container with adaptive padding and font size.</p>
</div>
Giải thích:
- Trong ví dụ này,
.containerthay đổi khoảng cách và cỡ chữ tùy thuộc vào chiều rộng màn hình
Ví dụ 2: Làm chủ đề cho trang web với biến và media-queries
:root {
--bg-color: #ffffff;
--text-color: #000000;
--link-color: #3498db;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
a {
color: var(--link-color);
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #000000;
--text-color: #ffffff;
--link-color: #9b59b6;
}
}
<body>
<p>This text and link will adapt to the user's preferred color scheme. Visit <a href="#">Example.com</a>.</p>
</body>
Giải thích:
-
Trong ví dụ này, trang web thay đổi chủ đề màu sắc tuỳ thuộc vào sở thích của người dùng (
prefers-color-scheme: dark). Màu nền, văn bản và liên kết thay đổi tự động khi chuyển đổi giữa chủ đề sáng và tối
4.3 Lưới thích ứng
Ví dụ sử dụng biến và media-queries cho lưới thích ứng:
:root {
--columns: 1fr;
--gap: 10px;
}
.grid-container {
display: grid;
grid-template-columns: var(--columns);
gap: var(--gap);
}
@media (min-width: 600px) {
:root {
--columns: 1fr 1fr;
}
}
@media (min-width: 900px) {
:root {
--columns: 1fr 1fr 1fr;
}
}
<div class="grid-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
Giải thích:
- Trong ví dụ này, lưới thích ứng thay đổi số lượng cột tùy theo chiều rộng màn hình. Trên màn hình hẹp (đến 600px), lưới có một cột, trên màn hình trung bình (600px đến 900px) có hai cột, và trên màn hình rộng (hơn 900px) có ba cột.
GO TO FULL VERSION