Tìm hiểu về Reponsive Web - Media Query

Nếu làm web nhiều chắc sẽ nghe qua keyword này rồi. Vậy nó là gì? như thế nào? có cần thiết ko? Không dùng nó thì có cách nào khác để đáp ứng được mục đích đó không?

Nó là 1 kỹ thuật css để giúp cho việc reponsive đơn giản hơn, dùng tag @media để gom nhóm các block thuộc tính chỉ của css, các thuộc tính css chỉ hoạt động khi điều kiện khai báo đúng. ví dụ: background của website sẽ là màu đỏ khi mà awidth của màn hình website dưới 480px.

@media only screen and (max-awidth: 480px) {
    body {
        background-color: red;
    }
}

Cú pháp Media query:

@media not|only mediatype and (media feature) {
    CSS-Code;
}

• Trong đó trong lập trình website thì ta thường sử dụng mediatype gồm các thuộc tính sau:
• all: dùng cho mọi thiết bị
• screen: dùng cho máy tính và các thiết bị smartphone/tablet

Media feature gồm các thuộc tính sau(sử dụng phổ biến):

• height: chiều cao của viewport
• awidth: chiều rộng của viewport
• max-awidth: chiều rộng tối đa của viewport
• max-height: chiều cao tối đa của viewport
• min-awidth: chiều rộng tối thiểu của viewport
• min-height: chiều cao tối thiểu của viewport
• orientation: định hướng của khung nhìn (xoay hoặc không xoay thiết bị)
• resolution: độ phân giải của thiết bị đầu ra (sử dụng dpi hoặc dpcm)

Các toán tử dùng trong Media

• AND : khi kết hợp nhiều điều kiện

@media screen and (min-awidth: 700px) and (orientation: landscape) { ... }

• OR : hoặc điều kiện này hoặc điều kiện kia (dùng với dấu phẩy)

@media handheld, (min-awidth: 650px), (orientation: landscape) { ... }

• NOT: phủ định

@media not screen and (min-awidth: 800px) { ... }

• Only: được dùng để ngăn chặn các browser cũ

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Chú ý: Lúc nào cũng design cho mobile trước , sẽ làm cho tren mobile load nhanh hơn

/* Dành cho điện thoại */
@media all and (min-awidth: 320px) {...}
 
/* Dành cho máy tính bảng chiều dọc */
@media all and (min-awidth: 600px) {...}
 
/* Dành cho máy tính bảng chiều ngang */
@media all and (min-awidth: 1024px) {...}
 
/* Dành cho màn hình desktop */
@media all and (min-awidth: 1280px) {...}

Thế tại sao lại nên sử dụng mobile-first? Có rất nhiều lý do như:

• Tập trung tối đa vào giao diện ở điện thoại vì xu hướng sử dụng điện thoại ngày càng tăng.
• Tránh việc viết lại CSS, vì một CSS ở điện thoại có thể được tái sử dụng trên desktop. Nhưng nếu bạn viết CSS trên desktop trước thì ở giao diện điện thoại bạn vẫn phải viết lại nếu muốn tùy biến.
• Dễ dàng trong việc triển khai và quản lý, nâng cấp sau này.
• Tránh các lỗi hiển thị trên điện thoại do việc tùy biến từ CSS ở desktop.
• Và nhiều lý do khác mà chỉ khi làm mới biết.