Trình tạo Media Query Viewport
Tạo các truy vấn phương tiện CSS cho thiết kế web đáp ứng.
Cài đặt Media Query
Cấu hình các điều kiện truy vấn phương tiện
Điều kiện 1
Cài đặt sẵn
Chọn các mẫu truy vấn phương tiện thường dùng
CSS đã tạo
@media screen and (max-width: 768px) {
/* Your CSS rules here */
}Các điểm ngắt phổ biến
Di động:
max-width: 480pxMáy tính bảng:
481px - 768pxMáy tính để bàn:
min-width: 1024pxMáy tính để bàn lớn:
min-width: 1200pxHướng dẫn Media Query
Các tính năng Media chính
- • chiều rộng/chiều cao: Chiều rộng/chiều cao của viewport
- • min-width/max-width: Điều kiện chiều rộng tối thiểu/tối đa
- • orientation: Hướng màn hình (dọc/ngang)
- • resolution: Độ phân giải màn hình (màn hình retina, v.v.)
- • hover: Hỗ trợ khả năng di chuột
- • pointer: Độ chính xác của con trỏ (chạm/chuột)
Mẹo sử dụng
- • Cách tiếp cận Mobile First: Sử dụng min-width để thiết kế từ màn hình nhỏ
- • Kết hợp các điều kiện phức tạp với các toán tử logic
- • Sử dụng loại phương tiện in để tạo kiểu in riêng biệt
- • Sử dụng độ phân giải để hỗ trợ hiển thị độ phân giải cao