1. Media Queries là gì?

Media Queries sẽ giúp bạn khi muốn sửa đổi trang web hoặc ứng dụng của mình tùy thuộc vào loại chung của thiết bị (chẳng hạn như in so với màn hình) hoặc các đặc điểm và thông số cụ thể (chẳng hạn như độ phân giải màn hình hoặc chiều rộng khung nhìn của trình duyệt)

Ở đây chúng ta sửu quy tắc @media để tùy chỉnh các phần tử trong CSS

Ví dụ:

2. Các cách sử dụng Media Queries trong CSS

2.1 Thêm Breakpoint

Chúng ta có thể thêm một Breakpoint( điểm ngắt) trong đó các phần nhất định của thiết kế sẽ hoạt động khác nhau ở mỗi bên của Breakpoint

Ví dụ:

2.2 Luôn ưu tiên thiết kế cho thiết bị di động đầu tiên

Mobile First có nghĩa là thiết kế cho thiết bị di động trước khi thiết kế cho máy tính để bàn hoặc bất kỳ thiết bị nào khác (Điều này sẽ giúp trang hiển thị nhanh hơn trên các thiết bị nhỏ hơn)

Điều này có nghĩa là chúng tôi phải thực hiện một số thay đổi trong CSS của mình

Thay vì thay đổi kiểu khi chiều rộng nhỏ hơn 768px, chúng ta nên thay đổi thiết kế khi chiều rộng lớn hơn 768px

Ví dụ:

2.3 Sử dụng nhiều Breakpoint

Bạn có thể thêm bao nhiêu điểm ngắt tùy thích để phù hợp với nhiều thiết bị khác nhau

Ví dụ:

Các Breakpoint thông dụng:

/* Các thiết bị cực nhỏ (điện thoại, 600px trở xuống) */
@media only screen and (max-width: 600px) {...}

/* Thiết bị nhỏ (máy tính bảng dọc và điện thoại lớn, 600px trở lên) */
@media only screen and (min-width: 600px) {...}

/* Thiết bị trung bình (máy tính bảng ngang, 768px trở lên) */
@media only screen and (min-width: 768px) {...}

/* Thiết bị lớn (máy tính xách tay / máy tính để bàn, 992px trở lên) */
@media only screen and (min-width: 992px) {...}

/* Thiết bị cực lớn (máy tính xách tay và máy tính để bàn lớn, 1200px trở lên) */
@media only screen and (min-width: 1200px) {...}

2.4 Định hướng: Portrait / Landscape

Truy vấn phương tiện cũng có thể được sử dụng để thay đổi bố cục của trang tùy thuộc vào hướng của trình duyệt.

Bạn có thể có một tập hợp các thuộc tính CSS sẽ chỉ áp dụng khi cửa sổ trình duyệt rộng hơn chiều cao của nó, được gọi là “Landscape” orientation

Ví dụ:

2.5 Ẩn các phần tử bằng Media Queries

Một cách sử dụng phổ biến khác của Media Queries là ẩn các phần tử trên các kích thước màn hình khác nhau

Ví dụ:

2.6 Thay đổi kích thước phông chữ bằng Media Queries

Bạn cũng có thể sử dụng Media Queries để thay đổi kích thước phông chữ của một phần tử trên các kích thước màn hình khác nhau

Ví dụ: