Responsive - media queries là gì?

Để 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

Giá trị	Mô tả
screen	Dành cho trang hiển thị (không dành cho bản in).
print	Dành cho bản in (không dành cho trang hiển thị).
all	Mặc định, dành cho trang hiển thị và cả bảng in.
speech	Dành cho phiên bản hỗ trợ đọc thành tiếng.

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:

Giá trị	Mô tả
max-width	Chiều rộng lớn nhất màn hình của thiết bị, tức là những thiết bị có màn hình nhỏ hơn max-width sẽ bị ảnh hưởng source code.
min-width	Chiều rộng nhỏ nhất màn hình của thiết bị, tức là những thiết bị có màn hình lớn hơn min-width sẽ bị ảnh hưởng source code.

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:

Học Web Chuẩn

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;
    }
}

Bài viết liên quan:

• Tweet
• Share
• Share
• Share
• Share