CSS Media Queries là một công cụ mạnh mẽ giúp bạn tạo giao diện responsive, phù hợp với nhiều kích thước và loại thiết bị khác nhau. Với Media Queries, bạn có thể tùy chỉnh kiểu dáng và bố cục cho các thiết bị từ điện thoại di động, máy tính bảng đến máy tính để bàn mà không cần viết lại mã CSS. Media Queries cho phép bạn kiểm tra các đặc điểm như độ rộng, chiều cao của màn hình, độ phân giải và áp dụng các quy tắc CSS phù hợp.

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à CSS Responsive Design.

1. Tổng quan về CSS Media Queries

Media Queries giúp bạn điều chỉnh bố cục và kiểu dáng cho từng loại màn hình khác nhau. Bằng cách sử dụng các câu lệnh kiểm tra đặc điểm thiết bị, bạn có thể chỉ định các quy tắc CSS khác nhau cho từng điều kiện cụ thể.

Cú pháp cơ bản của Media Queries

css
@media (query) {
    /* Quy tắc CSS */
}

Ví dụ:

css
@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Trong ví dụ trên, màu nền của body sẽ chuyển thành màu xanh nhạt khi chiều rộng màn hình nhỏ hơn hoặc bằng 600px.

2. Các loại Media Queries phổ biến

2.1 max-width và min-width

Hai giá trị phổ biến nhất trong Media Queries là max-width và min-width, thường được sử dụng để tạo giao diện responsive dựa trên độ rộng của màn hình.

  • max-width: Áp dụng các quy tắc CSS khi màn hình nhỏ hơn hoặc bằng giá trị đã chỉ định.
  • min-width: Áp dụng các quy tắc CSS khi màn hình lớn hơn hoặc bằng giá trị đã chỉ định.
css
/* Quy tắc cho màn hình nhỏ hơn hoặc bằng 768px */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

/* Quy tắc cho màn hình lớn hơn hoặc bằng 1024px */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
    }
}

2.2 max-height và min-height

Ngoài độ rộng, bạn cũng có thể sử dụng max-height và min-height để kiểm tra chiều cao của thiết bị, hữu ích cho các thiết bị như màn hình dọc hoặc các bố cục ngang.

css
@media (max-height: 700px) {
    .sidebar {
        display: none;
    }
}

2.3 orientation

orientation cho phép bạn kiểm tra hướng của thiết bị, rất hữu ích cho thiết bị di động hoặc máy tính bảng. Có hai giá trị cho orientation:

  • portrait: Thiết bị đang ở hướng dọc.
  • landscape: Thiết bị đang ở hướng ngang.
css
@media (orientation: landscape) {
    .image-gallery {
        display: flex;
    }
}

2.4 aspect-ratio

aspect-ratio giúp bạn kiểm tra tỷ lệ khung hình của thiết bị. Bạn có thể sử dụng min-aspect-ratio và max-aspect-ratio để kiểm tra tỷ lệ cụ thể.

css
@media (min-aspect-ratio: 16/9) {
    .video {
        width: 100%;
        height: auto;
    }
}

2.5 resolution

resolution được sử dụng để kiểm tra độ phân giải của màn hình, với các đơn vị như dpi (dots per inch) hoặc dppx (dots per pixel). Điều này hữu ích khi tạo kiểu dáng cho các màn hình có độ phân giải cao.

css
@media (min-resolution: 2dppx) {
    .icon {
        background-image: url('high-res-icon.png');
    }
}

3. Sử dụng Media Queries trong Responsive Design

Responsive Design là thiết kế giúp giao diện web linh hoạt và thích ứng với các kích thước màn hình khác nhau, tạo trải nghiệm nhất quán cho người dùng trên mọi thiết bị.

Ví dụ tạo bố cục responsive với Media Queries

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

/* Bố cục cho màn hình máy tính bảng */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        gap: 10px;
    }
}

/* Bố cục cho màn hình di động */
@media (max-width: 480px) {
    .container {
        padding: 10px;
    }
}

Trong ví dụ này:

  • Bố cục sẽ thay đổi từ hàng ngang thành cột dọc trên màn hình nhỏ hơn 768px.
  • Trên màn hình di động nhỏ hơn 480px, khoảng cách giữa các phần tử được giảm để tiết kiệm không gian.

4. Media Queries với nhiều điều kiện

Bạn có thể kết hợp nhiều điều kiện trong một Media Query bằng cách sử dụng and, or, hoặc not.

Ví dụ kết hợp nhiều điều kiện

css
@media (min-width: 600px) and (max-width: 1200px) {
    .content {
        max-width: 80%;
    }
}

Trong ví dụ này, quy tắc chỉ áp dụng cho các màn hình có chiều rộng từ 600px đến 1200px.

5. Sử dụng Media Queries cho Dark Mode

Dark Mode là chế độ giao diện tối, giúp tiết kiệm pin và giảm ánh sáng màn hình. Bạn có thể dùng Media Queries để tạo chế độ này dựa trên prefers-color-scheme.

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

Trong ví dụ này, khi thiết bị của người dùng được đặt ở chế độ tối, nền trang sẽ chuyển sang màu tối và chữ chuyển sang màu sáng.

6. Sử dụng Media Queries với phạm vi từ khóa

CSS cho phép bạn viết Media Queries dưới dạng từ khóa với các giá trị như only, all, print, và screen, giúp kiểm soát việc áp dụng kiểu dáng theo loại thiết bị.

Ví dụ sử dụng từ khóa screen và print

css
@media screen and (max-width: 768px) {
    .menu {
        display: none;
    }
}

@media print {
    .header, .footer {
        display: none;
    }
}

Trong ví dụ này:

  • screen giới hạn kiểu dáng chỉ áp dụng cho màn hình.
  • print ẩn các phần không cần thiết khi in trang.

7. Media Queries cho thiết kế Responsive Typography

Typography là một phần quan trọng của giao diện, và bạn có thể sử dụng Media Queries để điều chỉnh kích thước chữ trên các màn hình khác nhau.

css
/* Kích thước chữ mặc định */
body {
    font-size: 16px;
}

/* Tăng kích thước chữ trên màn hình lớn */
@media (min-width: 1024px) {
    body {
        font-size: 18px;
    }
}

/* Giảm kích thước chữ trên màn hình di động */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
}

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

  • Bắt đầu từ thiết kế di động (Mobile-First): Sử dụng min-width để tạo bố cục từ màn hình nhỏ nhất và mở rộng cho màn hình lớn.
  • Kiểm tra trên nhiều thiết bị: Đảm bảo rằng giao diệ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 sử dụng nhiều Media Queries để tạo trải nghiệm mượt mà trên mọi thiết bị.

9. Kết luận

CSS Media Queries là một công cụ không thể thiếu để tạo giao diện responsive, giúp trang web của bạn trở nên linh hoạt và phù hợp với mọi loại thiết bị. Từ việc kiểm tra độ rộng màn hình, chiều cao, tỷ lệ khung hình, đến chế độ tối, Media Queries cung cấp cho bạn mọi công cụ để tối ưu hóa giao diện cho người dùng. Để học thêm về các kỹ thuật CSS khác trong thiết kế responsive, hãy xem các bài viết khác trên "codetuthub.com" như CSS Flexbox, CSS Grid, và CSS Responsive Design.