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

Responsive image

Một tấm hình (image) thường có kích thước cố định, nếu ta không xử lý thì image này sẽ không chạy tốt trên các chiều rộng màn hình khác nhau, ví dụ trong trường hợp màn hình nhỏ hơn chiều rộng tấm hình, thì sẽ có thanh cuộn (scroll bar) ngang.

Để image có thể chạy tốt trên các màn hinh khác nhau, chúng ta sử dụng width và max-width kết hợp.

Cách viết một responsive image

img {
    width: percent;
    max-with: pixcel;
}

• width: percent: cho chiều rộng image co giản tỷ lệ theo chiều rộng của màn hình thiết bị, VD: width: 100% thì image lúc nào cũng sẽ có chiều rộng bằng với chiều rộng màn hình thiết bị, cho dù màn hinh thiết bị co giản rộng lớn ra sao thì image luôn là 100% (chiều cao mặc định auto - tự động tỷ lệ theo chiều rộng).
• max-width: pixcel: chiều rộng lớn nhất thường sẽ cho bằng với chiều rộng thực tế của image, mục đích là khi màn hình thiết bị lớn hơn image, thì chiều rộng của image sẽ trả về ban đầu, mục đích không phóng to image, tránh làm giảm chất lượng hình ảnh.

Ví dụ

Chúng ta sẽ thử dùng width và max-width để tạo image hiển thị linh hoạt cho tất cả các dạng màn hình của từng thiết bị, ta làm như sau:

HTML viết:

<img src="img_responsive.jpg" alt="">

CSS viết:

img {
    width: 100%;
    max-width: 960px;/* chiều rộng của image */
}

Hiển thị trình duyệt:

Do chiều rộng màn hình hiển thị nhỏ hơn chiều rộng image, nên chiều rộng image hiện tại sẽ là 100% so với chiều rộng hiển thị.