Để bàn về @media css nó rộng lắm các bạn à, các bạn cứ hiểu theo cách đơn giản áp dụng quy tắc này để tùy chỉnh css cho nhiều thiết bị khác nhau từ máy tính cho đến điện thoại smart phone và các thiết bị in ấn. Nói chung @media css có nhiều thuộc tính lắm nếu các bạn muốn tìm hiểu thì tìm các bài viết chuyên sâu trên mạng để đọc.
Trong bài này mình chỉ trình bày quy tắc đặt @media với thuộc tính min-width và max-width đúng cách khi viết css cụ thể là trong mã nguồn Blogger. Sử dụng 2 thuộc tính này để tạo reponsive cho trang web đáp ứng kích thước màn hình của các thiết bị khác nhau.
Viết đầy đủ về thuộc tính min-width và max-width như sau:
@media only screen and (min-width: px) {}
@media only screen and (max-width: px) {}
Hoặc có thể viết gọn hơn bỏ only đi
@media screen and (min-width: px) {}
@media screen and (max-width: px) {}
Hoặc viết gọn chỉ còn @media
@media (min-width: px) {}
@media (max-width: px) {}
Ngoài ra có tể kết hợp như sau:
@media (min-width: px) and (max-width: px) {}
Thuộc tính min-width vẫn thường được sử dụng trước max-width vì nó tối ưu css hơn cho nên min-width vẫ thường đặt trên max-width. Lấy ví dụ để lấy chiều rộng cho một phần tử id tên #article như sau:
Nếu kích thước màn hình lớn hơn 1366px bằng 65% còn kích thước màn hình từ 1025px đến nhỏ hơn 1365px bằng 80%
Thay vì bạn phải viết thế này nếu áp dụng thuộc tính max-width
@media (max-width: 1920px) {
#article {
width: 65%;
}
}
@media (max-width: 1365px) {
#article {
width: 80%;
}
}
@media (max-width: 1024px) {
#article {
width: unset;
}
}
Thì bạn sẽ sử dung min-width kết hợp max-width viết để tối ưu hơn:
@media (min-width: 1025px) and (max-width: 1365px) {
#article {
width: 80%;
}
}
@media (min-width: 1366px) {
#article {
width: 65%;
}
}
Như vậy khi viết css min-width, trình duyệt sẽ đọc đúng css theo yêu cầu.
Áp dụng trong một phần tử id hay class đều sử dụng 2 thuộc tính này các bạn cần nhớ quy tắc đặt thuộc tính như sau:
- Viết css cho tất cả các phần tử class, id trước còn min-width và max-width sẽ đặt bên dưới
- Nếu vừa sử dụng min-width và max-width thì min-width đặt trên max-width
- Sử dụng min-width với kích thước nhỏ hơn rồi mới đến kích thước lớn hơn
- Sử dụng max-width với kích thước lớn hơn rồi mới đến kích thước nhỏ hơn
- Nếu sử dụng kết hợp min-width và max-width thì min-width đứng trước max-width
Trên đây là một vài quy tắc bạn cần nhớ khi viết css reponsive cho template đáp ứng với kích thước màn hình để tránh nhầm lẫn khi viết mà trình duyệt không đọc và hiển thị đúng.
