📱 CSS Breakpoint Generator

Công cụ tự động sinh mảng Media Query Responsive theo chuẩn Framework hoặc Pixel tùy chỉnh.

1. Chiến lược Responsive
📱 Mobile First
(min-width)
💻 Desktop First
(max-width)
2. Hệ thống chuẩn (Frameworks)
Tailwind CSS
Bootstrap 5
Bulma
Custom
3. Các điểm Breakpoint (Pixel)
💻 Result Code
Vanilla CSS
SCSS (Mixins)
JS MatchMedia

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

Đây là chiến lược viết CSS mặc định cho điện thoại di động trước (không dùng Media query). Đoạn Media query sinh ra sẽ là @media (min-width: 768px), nghĩa là "Khi màn hình từ 768px trở lên, ghi đè CSS theo style này". Hầu hết các framework hiện đại dùng cách này.

Dùng px là tĩnh. Nếu dùng REM/EM (Ví dụ: 768px/16 = 48em), giao diện của bạn sẽ tương thích linh hoạt ngay cả khi người dùng tự chỉnh kích thước font chữ to/nhỏ trong Setting của trình duyệt (Browser Scaling).

Đoạn SCSS sinh ra sẽ gom các Breakpoint thành một @mixin chung tên respond-to(size). Bạn dùng cực nhanh bằng cú pháp: @include respond-to(md) { display: flex; }, code sẽ gọn sạch hơn rất nhiều.