UTILS.
100% trong trình duyệt
@

Trình tạo CSS Media Query

Tạo @media query responsive với các mẫu có sẵn và sao chép nó.

Về công cụ này

Tạo một @media query responsive bằng cách chọn min-width, max-width hoặc một khoảng cùng hướng màn hình, với các mẫu thiết bị một cú nhấp, rồi sao chép phần bao. Tất cả chạy trong trình duyệt của bạn.

Câu hỏi thường gặp

Khác biệt giữa min-width và max-width là gì?
min-width áp dụng kiểu ở chiều rộng đó trở lên (ưu tiên di động), còn max-width áp dụng ở chiều rộng đó trở xuống.
Các mẫu thiết bị hoạt động như thế nào?
Mỗi mẫu điền sẵn các breakpoint thông dụng — di động đến 767px, máy tính bảng 768–1023px và máy tính để bàn từ 1024px — mà bạn có thể tinh chỉnh sau đó.

Công cụ khác