Responsive - media queries

Để xử lý thay đổi giao diện giữa các dạng màn hình khác nhau (chiều rộng màn hình khác nhau), chúng ta sẽ sử dụng truy vấn @media.

Cấu trúc

Truy vấn @media được viết trong file CSS, với cấu trúc như sau:

@media only|not Media-type and (Media-future and|or|not Media-future) {
    tag {
        property: value;
    }
}

Media-type

Media-future

Có nhiều giá trị khác nhau, nhưng bài học này sẽ chỉ giới thiệu một số Media-future thường dùng:

Ví dụ đơn giản

div {
    background-color: blue;
}

@media only screen and (max-width: 1024px) {
    div {
        background-color: red;
    }
}

Nội dung code trên như sau:

• Tất cả các thiết bị sẽ có background-color: blue, riêng các thiết bị có màn hình nhỏ hơn 1024px sẽ có background-color: red.
• only screen: chỉ dành cho trang hiển thị (không dành cho bản in (print)).
• max-width: chỉ tác dụng cho chiều rộng màn hình lớn nhất là 1024px, tức là những màn hình nào nhỏ hơn 1024px đều sẽ bị ảnh hưởng code bên trong, cụ thể là div sẽ có background-color: red.

Ví dụ thêm

Chúng ta sẽ thử thay đổi background-color khác nhau tương ứng với các màn hình khác nhau, ta viết như sau:

HTML viết:

<div>Học Web Chuẩn</div>

CSS viết - khi chưa sử dụng @media:

div {
    background-color: #92dfc8;
    height: 150px;
    line-height: 150px;
    text-align: center;
    width: 200px;
}

Hiển thị trình duyệt - khi chưa sử dụng @media:

Bây giờ ta sẽ thử điều chỉnh sao cho khi thay đổi chiều rộng màn hình thì background-color của <div> sẽ thay đổi.

CSS viết - sử dụng @media để chỉnh hiện thị theo chiều rộng màn hình:

div {
    background-color: #333333;
    height: 150px;
    line-height: 150px;
    text-align: center;
    width: 200px;
}

@media only screen and (max-width: 1024px) {
    div {
        background-color: red;
    }
}

@media only screen and (max-width: 768px) {
    div {
        background-color: blue;
    }
}

@media only screen and (max-width: 640px) {
    div {
        background-color: yellow;
    }
}

@media only screen and (max-width: 480px) {
    div {
        background-color: pink;
    }
}

Click ví dụ @media để xem kết quả.