CSS Media Queries giúp bạn tạo ra các giao diện responsive, tối ưu hóa trải nghiệm người dùng trên mọi kích thước và loại thiết bị. Thông qua Media Queries, bạn có thể thay đổi bố cục và kiểu dáng của trang web dựa trên các đặc điểm cụ thể như độ rộng, chiều cao, hướng thiết bị, và độ phân giải màn hình. Bài viết này sẽ cung cấp các ví dụ thực tế để bạn dễ dàng áp dụng Media Queries trong các dự án.

Bài viết này là một phần trong chuỗi học CSS trên "codetuthub.com", cùng với các chủ đề như CSS Flexbox, CSS Grid, và Responsive Web Design.

1. Sử dụng Media Queries cho các kích thước màn hình khác nhau

1.1 Màn hình máy tính để bàn, máy tính bảng và điện thoại di động

Bạn có thể áp dụng Media Queries cho các loại thiết bị khác nhau bằng cách sử dụng max-width và min-width:

css
/* Mặc định cho màn hình lớn */
body {
    font-size: 18px;
}

/* Máy tính bảng */
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }
}

/* Điện thoại di động */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
}

Trong ví dụ này:

  • Font size mặc định cho màn hình lớn là 18px.
  • Trên máy tính bảng, font size giảm xuống còn 16px.
  • Trên điện thoại di động, font size giảm xuống còn 14px để phù hợp với không gian nhỏ hơn.

1.2 Responsive Layout cho Container

css
.container {
    display: flex;
    gap: 20px;
}

/* Máy tính bảng */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        gap: 10px;
    }
}

Ở đây, .container sẽ thay đổi từ bố cục hàng ngang thành cột dọc trên màn hình nhỏ hơn 768px, giúp bố cục dễ đọc hơn trên thiết bị nhỏ.

2. Thay đổi kiểu dáng dựa trên chiều cao màn hình

Nếu bạn muốn điều chỉnh giao diện dựa trên chiều cao, bạn có thể sử dụng max-height và min-height.

css
@media (max-height: 600px) {
    .header {
        font-size: 20px;
    }
    .footer {
        display: none;
    }
}

Trong ví dụ này:

  • font-size của .header sẽ tăng lên khi chiều cao màn hình nhỏ hơn 600px.
  • .footer sẽ ẩn đi để tối ưu không gian trên màn hình ngắn hơn.

3. Sử dụng Media Queries với orientation (hướng thiết bị)

Thiết lập bố cục cho chế độ dọc và ngang

css
/* Hướng dọc (portrait) */
@media (orientation: portrait) {
    .sidebar {
        display: none;
    }
    .main-content {
        width: 100%;
    }
}

/* Hướng ngang (landscape) */
@media (orientation: landscape) {
    .sidebar {
        display: block;
        width: 30%;
    }
    .main-content {
        width: 70%;
    }
}

Trong ví dụ này:

  • Ở chế độ dọc, .sidebar sẽ ẩn đi và .main-content chiếm toàn bộ chiều rộng màn hình.
  • Ở chế độ ngang, .sidebar sẽ hiển thị với độ rộng 30% và .main-content chiếm 70%.

4. Thay đổi kiểu dáng cho Dark Mode

Sử dụng Media Queries để thiết lập chế độ Dark Mode cho trang web của bạn dựa trên prefers-color-scheme.

css
@media (prefers-color-scheme: dark) {
    body {
        background-color: #333;
        color: #fff;
    }
    a {
        color: #4e9ef7;
    }
}

Trong ví dụ này:

  • Khi thiết bị của người dùng ở chế độ tối, nền trang sẽ chuyển sang màu tối và chữ chuyển sang màu sáng.
  • Liên kết (a) sẽ có màu xanh sáng dễ nhìn trên nền tối.

5. Thay đổi bố cục lưới (grid layout) dựa trên độ rộng màn hình

Media Queries giúp bạn điều chỉnh số cột của lưới dựa trên kích thước màn hình:

css
.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Máy tính bảng */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Điện thoại di động */
@media (max-width: 480px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

Ở đây:

  • Trên màn hình lớn, .grid có 4 cột.
  • Trên máy tính bảng, .grid giảm xuống còn 2 cột.
  • Trên điện thoại di động, .grid chuyển sang một cột để tối ưu không gian.

6. Thay đổi hình nền dựa trên độ phân giải

Media Queries cũng có thể kiểm tra độ phân giải của thiết bị và thay đổi hình nền cho màn hình có độ phân giải cao (retina).

css
/* Hình nền cho màn hình độ phân giải thường */
.header {
    background-image: url('header.png');
}

/* Hình nền cho màn hình độ phân giải cao */
@media (min-resolution: 2dppx) {
    .header {
        background-image: url('header@2x.png');
    }
}

Trong ví dụ này:

  • Hình nền header@2x.png sẽ được áp dụng cho các màn hình có độ phân giải cao, đảm bảo hiển thị sắc nét.

7. Kết hợp nhiều điều kiện với Media Queries

Bạn có thể kết hợp nhiều điều kiện bằng cách sử dụng and, or, hoặc not để kiểm tra các đặc điểm khác nhau của thiết bị.

css
@media (min-width: 600px) and (orientation: landscape) {
    .menu {
        display: flex;
    }
}

Trong ví dụ này, .menu sẽ hiển thị dạng flex khi chiều rộng màn hình lớn hơn 600px và thiết bị ở chế độ ngang.

8. Ví dụ thực tế với thiết kế responsive toàn diện

Thiết lập bố cục responsive từ màn hình lớn đến nhỏ

css
/* Bố cục mặc định cho màn hình lớn */
.container {
    display: flex;
    gap: 30px;
}

.card {
    flex: 1;
    padding: 20px;
}

/* Máy tính bảng */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    .card {
        padding: 15px;
    }
}

/* Điện thoại di động */
@media (max-width: 480px) {
    .card {
        padding: 10px;
        font-size: 14px;
    }
}

Trong ví dụ này:

  • Bố cục chuyển từ hàng ngang thành cột dọc trên máy tính bảng.
  • Các card điều chỉnh khoảng đệm và kích thước font chữ trên các thiết bị di động.

9. Lưu ý khi sử dụng CSS Media Queries

  • Sử dụng min-width cho thiết kế mobile-first: Tạo giao diện cho màn hình nhỏ trước và mở rộng cho màn hình lớn hơn.
  • Kiểm tra trên nhiều thiết bị: Đảm bảo rằng giao diện của bạn hoạt động tốt trên các thiết bị và kích thước màn hình khác nhau.
  • Sử dụng nhiều Media Queries: Đừng giới hạn giao diện với chỉ một vài kích thước; hãy áp dụng nhiều Media Queries để tạo trải nghiệm người dùng mượt mà.

10. Kết luận

CSS Media Queries cung cấp cho bạn công cụ linh hoạt để tạo giao diện responsive, tối ưu hóa trải nghiệm người dùng trên nhiều thiết bị. Từ việc thay đổi bố cục, kiểu dáng, đến tạo Dark Mode và các hình nền đặc biệt, Media Queries giúp bạn kiểm soát toàn diện giao diện web của mình. Để tìm hiểu thêm về các kỹ thuật CSS nâng cao trong thiết kế responsive, hãy xem thêm các bài viết trên "codetuthub.com" như CSS Flexbox, CSS Grid, và Responsive Web Design.

Hy vọng bài viết này giúp bạn hiểu rõ cách sử dụng CSS Media Queries qua các ví dụ thực tế, từ đó áp dụng linh hoạt vào thiết kế web của mình!