Responsive Breakpoint Tester

Tính năng nổi bật

• Test viewport width từ 320px đến 1920px bằng slider, nhập số để thử độ rộng bất kỳ
• Hiển thị breakpoint hiện tại (xs, sm, md, lg, xl, xxl)
• Icon thiết bị trực quan (phone, tablet, laptop, desktop)
• Slider kéo thả mượt mà
• Preset width phổ biến: 320, 576, 768, 992, 1200, 1400px
• Copy CSS media queries sẵn sàng sử dụng
• Copy cấu hình screens cho Tailwind v3 (tailwind.config.js) kèm khối @theme cho Tailwind v4
• Bảng breakpoints với highlight hiện tại
• Theo chuẩn Bootstrap 5
• Hoàn toàn miễn phí, không giới hạn

Tại Sao Developer Cần Hiểu Breakpoints?

Breakpoints là nền tảng của responsive web design. Chúng xác định tại điểm nào layout sẽ thay đổi để phù hợp với kích thước màn hình. Hiểu rõ breakpoints giúp bạn: viết CSS media queries chính xác, debug layout issues trên các thiết bị khác nhau, đảm bảo consistency trong design system, và tối ưu trải nghiệm người dùng trên mobile/tablet/desktop. Công cụ này giúp bạn visualize breakpoints và có sẵn code để copy vào project. Đặc biệt hữu ích khi designer và developer cần thống nhất một câu hỏi rất cụ thể: ở độ rộng 834px của iPad Pro 11 inch, hay 1536px của laptop Windows đặt tỷ lệ 125%, layout đang nằm ở breakpoint nào.

Lợi ích khi sử dụng

• •Debug responsive design nhanh chóng
• •Hiểu rõ breakpoint system của Bootstrap/Tailwind
• •Copy media queries sẵn sàng sử dụng
• •Kiểm tra layout tại các viewport cụ thể
• •Đảm bảo website responsive trên mọi thiết bị
• •Tiết kiệm thời gian viết CSS từ đầu
• •Đồng bộ breakpoint giữa dự án Bootstrap và dự án Tailwind trong cùng một team

Hướng Dẫn Sử Dụng Responsive Breakpoint Tester

1. 1Kéo slider (320px - 1920px) hoặc nhập viewport width bất kỳ vào ô số
2. 2Hoặc click vào preset width phổ biến (320, 576, 768...)
3. 3Xem breakpoint hiện tại với icon thiết bị tương ứng
4. 4Kiểm tra bảng breakpoints với highlight vị trí hiện tại
5. 5Nhấn Copy CSS để lấy media queries
6. 6Nhấn Copy Tailwind để lấy config screens

Mobile-First Vs Desktop-First - Chiến Lược Responsive Design

Mobile-first là approach viết CSS mặc định cho mobile, sau đó dùng min-width media queries để override cho màn hình lớn hơn. Đây là best practice được Bootstrap, Tailwind, và Google khuyến nghị vì: Khoảng 60% traffic web hiện nay đến từ mobile, với nhiều website bán lẻ tại Việt Nam tỷ lệ này còn cao hơn. Google sử dụng mobile-first indexing - đánh giá trang web dựa trên phiên bản mobile. CSS nhẹ hơn vì mobile styles thường đơn giản hơn, chỉ thêm complexity cho desktop. Ngược lại, desktop-first dùng max-width queries để override cho mobile - phù hợp khi redesign website desktop hiện có. Công cụ này generate CSS theo mobile-first approach (min-width), giúp bạn có sẵn media queries chuẩn để sử dụng ngay trong project.

Breakpoints Trong Các Framework CSS Phổ Biến

Mỗi CSS framework có breakpoints mặc định khác nhau: Bootstrap 5 - xs (<576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px), xxl (>=1400px). Tailwind CSS - sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). Foundation - small (0), medium (640px), large (1024px), xlarge (1200px), xxlarge (1440px). Material-UI - xs (0), sm (600px), md (900px), lg (1200px), xl (1536px). Khi chọn breakpoints cho project, cân nhắc: Đối tượng người dùng (thiết bị phổ biến), Design requirements, và Framework đang sử dụng. Công cụ này cho phép bạn visualize breakpoints chuẩn Bootstrap 5 và export cả CSS media queries lẫn Tailwind config để áp dụng ngay vào dự án.

Debug Responsive Design - Các Lỗi Thường Gặp Và Cách Khắc Phục

Các lỗi responsive phổ biến và cách fix: Content overflow - nội dung tràn ra ngoài viewport trên mobile, fix bằng cách tìm đúng phần tử có chiều rộng cố định gây tràn thay vì chỉ che đi bằng overflow-x: hidden. Images không responsive - thêm max-width: 100% và height: auto cho tất cả images. Font size quá nhỏ trên mobile - dùng clamp() hoặc responsive font sizes. Touch target quá nhỏ - buttons và links cần tối thiểu 44x44px trên mobile (Apple HIG). Horizontal scroll không mong muốn - kiểm tra elements có width > 100vw. Tables không responsive - dùng overflow-x: auto wrapper hoặc responsive table patterns. Để debug: Chrome DevTools (F12 > Toggle Device Toolbar) cho phép simulate bất kỳ viewport width nào, kết hợp với công cụ này để hiểu chính xác breakpoint đang active tại mỗi kích thước.

Vì sao công cụ không tải website của bạn vào khung xem trước

Nhiều trang 'responsive tester' cho phép dán URL rồi hiển thị website trong vài khung iframe với kích thước điện thoại, máy tính bảng, laptop. Công cụ này cố ý không làm vậy, vì cách đó thường không hoạt động và dễ cho kết quả sai. Rất nhiều website, kể cả website WordPress có plugin bảo mật và hầu hết trang ngân hàng, mạng xã hội, gửi header X-Frame-Options: DENY hoặc SAMEORIGIN, hoặc chỉ thị Content-Security-Policy frame-ancestors, để chặn bị nhúng vào trang khác nhằm phòng tấn công clickjacking. Khi đó khung iframe chỉ hiện trang trắng hoặc thông báo từ chối kết nối. Ngay cả khi website cho nhúng, iframe chỉ mô phỏng độ rộng: trình duyệt vẫn dùng User-Agent của máy tính, không có màn hình cảm ứng, không có mật độ điểm ảnh cao và không có thanh địa chỉ co giãn như trên điện thoại thật. Vì vậy công cụ tập trung vào đúng phần làm chính xác được là cho biết một độ rộng rơi vào breakpoint nào, còn việc xem website thật nên dùng chế độ thiết bị trong DevTools hoặc điện thoại thật.

Độ rộng CSS của các thiết bị phổ biến và breakpoint tương ứng

Media query dùng pixel CSS, không phải độ phân giải vật lý ghi trên hộp máy. Một số mốc tham khảo ở chiều dọc: iPhone SE thế hệ 2 và 3 rộng 375px; iPhone 12, 13, 14 rộng 390px; iPhone 15 và 15 Pro rộng 393px; các bản Plus và Pro Max rộng 430px; phần lớn điện thoại Android phổ thông nằm trong khoảng 360px đến 412px. Tất cả đều rơi vào xs của Bootstrap, nghĩa là mọi điện thoại cầm dọc đều dùng chung một bộ style. iPad mini thế hệ 6 rộng 744px (sm), iPad thế hệ 9 rộng 810px, iPad thế hệ 10 và iPad Air rộng 820px, iPad Pro 11 inch rộng 834px (đều là md), iPad Pro 12,9 inch cầm dọc rộng 1024px (lg). Laptop phổ biến ở 1280px, 1366px (xl) và 1440px, 1536px, 1920px (xxl). Khi xoay ngang, điện thoại 390px trở thành khoảng 844px và nhảy lên md, đây là trường hợp hay bị quên khi kiểm thử. Các con số trên thay đổi theo đời máy, nên coi đây là mốc định hướng và đối chiếu thêm với số liệu thiết bị thực tế trong Google Analytics của website bạn.

Ví dụ: cùng một độ rộng, Bootstrap và Tailwind mặc định cho kết quả khác nhau

Kéo slider tới 1000px, công cụ hiển thị lg vì 1000 nằm trong khoảng 992px đến 1199px của Bootstrap. Nhưng trong Tailwind mặc định, lg chỉ bắt đầu từ 1024px, nên ở 1000px class lg: chưa có hiệu lực và layout vẫn đang ở md. Tương tự, ở 1450px Bootstrap đã là xxl, còn Tailwind mặc định vẫn là xl vì 2xl bắt đầu từ 1536px. Ở 1024px, giá trị mặc định khi mở công cụ, cả hai cùng là lg. Khác biệt này là nguồn gốc của nhiều lỗi khi một team chuyển giao diện từ Bootstrap sang Tailwind hoặc dùng cả hai trong cùng hệ thống: designer vẽ theo mốc 992px nhưng code Tailwind lại đổi layout ở 1024px. Nút Copy Tailwind tạo sẵn cấu hình đưa Tailwind về đúng các mốc 576, 768, 992, 1200 và 1400px của Bootstrap để hai bên thống nhất. Lưu ý Tailwind không có tên xs, khoảng dưới 576px chính là style mặc định không tiền tố.

Ranh giới breakpoint: min-width bao gồm chính mốc đó

Media query @media (min-width: 768px) có hiệu lực khi viewport rộng đúng 768px, nên tại 768px công cụ hiển thị md chứ không phải sm. Đó là lý do bảng breakpoint ghi sm là 576px đến 767px. Khi viết theo kiểu desktop-first với max-width, Bootstrap 5 dùng các giá trị lẻ như max-width: 767.98px thay vì 767px, vì trên màn hình có tỷ lệ phóng không nguyên, viewport có thể rộng 767,5px và rơi vào khe hở giữa hai query nếu dùng số nguyên. Cú pháp khoảng mới của CSS như @media (width >= 768px) và @media (width < 768px) tránh được vấn đề này và đã được các trình duyệt hiện đại hỗ trợ, bạn có thể dùng nếu không cần hỗ trợ trình duyệt quá cũ.

Tailwind v3 và v4: dán cấu hình vào đâu

Khi nhấn Copy Tailwind, bạn nhận được hai phần. Phần đầu là khối theme.screens cho tailwind.config.js, dùng với Tailwind v3; khai báo trực tiếp trong theme thay vì theme.extend nghĩa là thay toàn bộ breakpoint mặc định, không phải thêm vào. Phần sau, nằm trong khối chú thích, là cú pháp cho Tailwind v4, phiên bản chuyển cấu hình sang CSS: bạn bỏ dấu chú thích và đặt khối @theme vào file CSS chính ngay sau dòng @import "tailwindcss". Dòng --breakpoint-*: initial xóa các breakpoint mặc định trước khi khai báo bộ mới. Nếu chỉ muốn thêm một mốc nhỏ hơn như xs mà giữ nguyên mặc định, hãy dùng theme.extend.screens ở v3 hoặc chỉ khai báo thêm một biến --breakpoint-xs ở v4.

Thẻ meta viewport và container queries: hai thứ quyết định breakpoint có chạy hay không

Nếu trang thiếu thẻ <meta name="viewport" content="width=device-width, initial-scale=1">, trình duyệt di động sẽ giả lập một viewport rộng khoảng 980px rồi thu nhỏ toàn trang, khi đó mọi media query dành cho điện thoại đều không kích hoạt dù bạn viết đúng. Đây là lỗi đầu tiên cần kiểm tra khi layout mobile 'không ăn CSS'. Ngoài ra, media query chỉ nhìn độ rộng của cả cửa sổ. Với các thành phần như thẻ sản phẩm có thể nằm trong cột hẹp ở trang này và cột rộng ở trang khác, container queries (@container) cho phép đổi layout theo độ rộng của chính khung chứa, và đã được các trình duyệt hiện đại hỗ trợ. Cách làm phổ biến là dùng breakpoint của công cụ này cho bố cục trang tổng thể, còn container queries cho từng thành phần tái sử dụng.

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

Từ khóa liên quan

• responsive breakpoints
• media queries generator
• viewport width tester
• responsive design tool
• bootstrap breakpoints
• tailwind breakpoints
• mobile first css
• responsive web design
• screen size tester
• css media queries
• breakpoint bootstrap 5
• tailwind v4 breakpoint
• kích thước màn hình iphone px
• viewport iphone ipad
• kiểm tra responsive website
• meta viewport
• container queries
• x-frame-options iframe