Mở đầu — vì sao bài này quan trọng
Hãy hình dung bạn vừa thiết kế xong một trang landing page tuyệt đẹp trên màn hình laptop 15 inch. Bạn tự hào gửi link cho khách hàng. Mười phút sau khách nhắn lại: "Anh ơi, mở trên iPhone chữ to lù lù, nút bấm tràn ra ngoài, hình bị méo". Bạn mở điện thoại lên kiểm tra và đúng là một thảm họa. Cảm giác đó hầu như designer web nào cũng từng trải qua.
Vấn đề nằm ở chỗ: web không giống thiết kế in ấn. Một tờ poster A4 chỉ có một kích thước duy nhất, còn website của bạn phải hiển thị tốt trên màn hình iPhone SE rộng 375px, trên iPad 820px, trên laptop 1366px, và trên màn hình desktop 27 inch rộng 2560px. Đó là một dải kích thước cực kỳ rộng. Breakpoint chính là công cụ giúp bạn kiểm soát dải kích thước đó — quyết định "tại điểm nào thì bố cục cần thay đổi".
Ở Bài 16 bạn đã học triết lý Mobile-First — bắt đầu thiết kế từ điện thoại rồi mở rộng lên. Bài 17 này là phần kỹ thuật bổ trợ trực tiếp: bạn sẽ học chính xác những điểm gãy (breakpoint) nào nên dùng trong năm 2026, vì sao Tailwind CSS lại chọn các con số 640 / 768 / 1024 / 1280, và làm thế nào để đặt breakpoint dựa trên nội dung chứ không phải dựa trên tên thiết bị. Đây là kiến thức nền tảng — nắm vững nó, mọi layout responsive về sau của bạn sẽ trở nên đơn giản và có hệ thống.
Khái niệm cốt lõi
Breakpoint là gì
Breakpoint (điểm gãy) là một độ rộng màn hình cụ thể, tại đó bạn ra lệnh cho giao diện thay đổi cách sắp xếp. Ví dụ: "khi màn hình rộng từ 768px trở lên, hãy chuyển danh sách sản phẩm từ 1 cột thành 2 cột". Con số 768px ấy chính là một breakpoint.
Về mặt kỹ thuật, breakpoint được khai báo trong CSS bằng media query:
/ Mặc định: mobile (mobile-first) /
.products {
display: grid;
grid-template-columns: 1fr; / 1 cột /
}/ Breakpoint tại 768px trở lên /
@media (min-width: 768px) {
.products {
grid-template-columns: 1fr 1fr; / 2 cột /
}
}
/ Breakpoint tại 1024px trở lên /
@media (min-width: 1024px) {
.products {
grid-template-columns: 1fr 1fr 1fr; / 3 cột /
}
}
Lưu ý chữ min-width: chúng ta dùng "từ kích thước này trở lên", tức là viết theo hướng mobile-first. Style mặc định (không nằm trong media query) là dành cho điện thoại, rồi mỗi breakpoint thêm vào khi màn hình lớn dần. Đây là cách viết được khuyến nghị năm 2026, ngược với kiểu cũ dùng max-width (thiết kế desktop trước rồi co lại).
Bộ breakpoint mặc định của Tailwind CSS
Tailwind CSS — framework CSS phổ biến nhất hiện nay (bạn sẽ học kỹ ở Bài 40) — định nghĩa sẵn 5 breakpoint mà gần như đã trở thành chuẩn de-facto của ngành. Bạn nên thuộc lòng chúng:
| Tên | Độ rộng | Thiết bị tiêu biểu |
|---|---|---|
sm | 640px | Điện thoại nằm ngang, phablet lớn |
md | 768px | Máy tính bảng (iPad portrait) |
lg | 1024px | Laptop nhỏ, iPad landscape |
xl | 1280px | Desktop phổ thông |
2xl | 1536px | Màn hình lớn, desktop rộng |
grid-cols-1 md:grid-cols-2 lg:grid-cols-3 nghĩa là: mặc định 1 cột, từ 768px là 2 cột, từ 1024px là 3 cột — đúng y hệt đoạn CSS dài dòng phía trên nhưng viết trong một dòng.Điểm cực kỳ quan trọng cần nhớ: các tiền tố Tailwind đều là min-width. md:grid-cols-2 không có nghĩa "chỉ áp dụng cho tablet", mà là "áp dụng từ 768px trở lên" — tức là tablet, laptop, desktop đều dùng. Người mới rất hay hiểu nhầm chỗ này.
Vì sao lại là 640 / 768 / 1024 / 1280?
Những con số này không phải ngẫu nhiên, nhưng cũng không tương ứng chính xác với một thiết bị cụ thể nào. Đó là điều quan trọng nhất bạn cần hiểu trong bài này.
- 768px là chiều rộng của iPad đời đầu ở chế độ dọc (portrait). Đây là di sản lịch sử và vẫn là ranh giới hợp lý giữa "điện thoại" và "máy tính bảng".
- 1024px là iPad ở chế độ ngang (landscape), đồng thời là ngưỡng mà nhiều laptop nhỏ bắt đầu.
- 1280px và 1536px đại diện cho các độ phân giải desktop phổ biến.
- 640px là một ngưỡng trung gian tiện lợi cho điện thoại lớn nằm ngang.
Content-based breakpoint — đặt điểm gãy theo nội dung
Đây là tư duy nâng cao tách designer giỏi khỏi người mới. Thay vì hỏi "iPad rộng bao nhiêu?", hãy hỏi: "Tại độ rộng nào thì layout của tôi bắt đầu xấu?"
Cách làm: mở trang web, kéo từ từ trình duyệt cho hẹp dần lại. Đến lúc nào đó bạn sẽ thấy dòng chữ quá dài khó đọc, hoặc thẻ sản phẩm bị bóp méo, hoặc khoảng trắng dư thừa kỳ cục. Chính tại điểm đó bạn đặt một breakpoint. Breakpoint sinh ra từ nhu cầu thực tế của nội dung, không phải từ bảng thông số thiết bị.
Trong thực hành, bạn thường kết hợp cả hai: dùng bộ 640/768/1024/1280 của Tailwind làm khung xương chính (vì đa số layout hợp với chúng), và thêm breakpoint tùy chỉnh khi component cụ thể đòi hỏi.
Container query — bước tiến của 2026
Một điểm mới mà bạn nhất định phải biết: từ 2023 trở đi và đặc biệt phổ biến vào 2026, trình duyệt đã hỗ trợ rộng rãi container query. Khác với media query (phản ứng theo độ rộng cả màn hình), container query phản ứng theo độ rộng của thành phần cha chứa nó.
Ví dụ một card sản phẩm: nếu đặt trong sidebar hẹp thì hiển thị dọc, nếu đặt trong vùng nội dung rộng thì hiển thị ngang — bất kể màn hình to nhỏ thế nào. Media query không làm được điều này một cách tự nhiên, container query thì có. Tailwind hỗ trợ qua tiền tố @container và @sm:, @md:... Bạn chưa cần dùng ngay, nhưng hãy ghi nhớ rằng năm 2026 breakpoint không còn chỉ xoay quanh kích thước màn hình nữa.
Tình huống thực tế
Ví dụ 1 — Tiki và lưới sản phẩm co giãn
Hãy lấy một sàn thương mại điện tử Việt Nam quen thuộc: Tiki. Trên trang danh mục sản phẩm, bạn sẽ thấy lưới sản phẩm thay đổi số cột theo độ rộng màn hình. Trên điện thoại (dưới 640px), mỗi hàng hiển thị 2 sản phẩm. Trên tablet (khoảng 768px), 3-4 sản phẩm mỗi hàng. Trên desktop rộng (từ 1280px), có thể tới 5-6 sản phẩm mỗi hàng.
Nếu bạn dựng lưới này bằng Tailwind, code sẽ đại loại: grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5. Mỗi tiền tố tương ứng một breakpoint, và lưới tự nhảy cột tại từng mốc.
Diễn giải: Vì sao điện thoại để 2 cột chứ không 1? Vì thẻ sản phẩm thương mại điện tử thường nhỏ gọn (ảnh + giá + tên ngắn), để 1 cột sẽ lãng phí không gian và buộc người dùng cuộn rất nhiều. Đây chính là quyết định content-based: số cột được chọn dựa trên kích thước nội dung của thẻ, không phải dựa trên tên thiết bị.
Bài học rút ra: Cùng một component (thẻ sản phẩm) nhưng số lượng hiển thị mỗi hàng được điều chỉnh để mỗi thẻ luôn nằm trong khoảng độ rộng đẹp (thường 150-280px). Breakpoint là công cụ giữ cho thẻ luôn ở "vùng đẹp" đó.
Ví dụ 2 — Startup giáo dục đặt breakpoint sai và hậu quả
Một startup edtech giả định ở TP.HCM, gọi là "HocNhanh", thuê freelancer dựng trang khóa học. Freelancer này quen tư duy cũ, đặt breakpoint cứng tại đúng 768px cho iPad và đúng 414px cho "iPhone Plus". Khi ra mắt, đội ngũ phát hiện một vấn đề lạ: trên Samsung Galaxy Z Fold mở ra (rộng khoảng 700px) và trên một số tablet Android 600px, giao diện vỡ — menu vừa không phải mobile vừa không phải desktop, chữ chen chúc.
Lý do: freelancer thiết kế cho từng thiết bị cụ thể nên bỏ sót toàn bộ dải kích thước nằm giữa các thiết bị họ test. Mọi máy không trùng kích thước iPhone/iPad đều rơi vào vùng chết.
Cách họ sửa: Chuyển sang bộ breakpoint chuẩn của Tailwind (640/768/1024/1280) và áp dụng tư duy mobile-first. Thay vì hỏi "iPhone rộng bao nhiêu", họ kéo trình duyệt và quan sát layout gãy ở đâu. Kết quả: số breakpoint giảm từ 6 xuống còn 3, mà giao diện lại mượt trên mọi độ rộng vì các style được kế thừa liên tục theo min-width.
Bài học rút ra: Đừng bao giờ đặt breakpoint để khớp một model điện thoại. Đặt breakpoint theo dải kích thước, và mỗi style phải bao phủ một khoảng chứ không phải một điểm.
Ví dụ 3 — Báo VnExpress và việc giới hạn độ rộng nội dung
Vào trang chủ VnExpress trên một màn hình desktop 27 inch (rộng hơn 2000px). Bạn sẽ thấy nội dung không tràn hết chiều ngang màn hình mà bị giới hạn ở giữa, hai bên là khoảng trắng. Đây là kỹ thuật max-width container thường đi kèm với breakpoint lớn nhất.
Ở đây breakpoint xl (1280px) và 2xl (1536px) không dùng để đổi số cột, mà để dừng việc giãn nở. Khi vượt qua một ngưỡng, designer khóa độ rộng nội dung lại (ví dụ tối đa 1200px) để dòng văn bản không bị kéo dài quá mức gây mỏi mắt — bạn còn nhớ Bài 9 về line length lý tưởng 50-75 ký tự chứ?
Diễn giải: Không phải breakpoint nào cũng để "thêm cột". Breakpoint lớn nhất thường để bảo vệ trải nghiệm đọc trên màn hình khổng lồ. Trong Tailwind người ta hay viết max-w-screen-xl mx-auto để khóa container và căn giữa.
Bài học rút ra: Hãy nghĩ về cả hai đầu của dải kích thước. Đầu nhỏ (mobile) cần gom layout lại; đầu lớn (màn hình rộng) cần kìm hãm layout để nội dung không loãng.
Hướng dẫn từng bước
Đây là quy trình thực tế để đặt breakpoint cho một trang bất kỳ:
- Bắt đầu ở mobile (375px). Mở DevTools của Chrome (phím F12), bật chế độ Device Toolbar (Ctrl/Cmd + Shift + M), chọn độ rộng khoảng 375px. Thiết kế layout tốt nhất có thể cho khung này trước — thường là layout 1 cột, menu thu gọn thành hamburger.
- Kéo giãn từ từ và quan sát. Từ 375px, kéo trình duyệt rộng dần ra. Mắt bạn dán vào layout. Đến khi nào nó bắt đầu trông "thưa thớt", "lãng phí khoảng trắng" hoặc "chữ quá dài" — dừng lại. Ghi lại con số đó.
- Làm tròn về breakpoint chuẩn gần nhất. Nếu layout gãy ở khoảng 700px, hãy dùng
md(768px) thay vì đặt cứng 700px — trừ khi có lý do rất rõ ràng. Bám vào bộ chuẩn giúp code dễ bảo trì và đồng nhất với cả đội.
- Thêm style cho breakpoint đó. Tại mốc vừa chọn, thêm thay đổi: tăng số cột, đổi hướng flex, hiện menu ngang thay hamburger, tăng padding...
- Lặp lại cho đến desktop. Tiếp tục kéo giãn, mỗi lần layout "muốn thay đổi" thì thêm một breakpoint. Đa số trang chỉ cần 2-3 breakpoint là đủ — đừng tham lam.
- Kiểm tra ở đầu lớn. Đến độ rộng rất lớn (1600px+), kiểm tra xem nội dung có bị giãn loãng không. Nếu có, thêm
max-widthcontainer để khóa lại.
- Test ở các điểm "giữa breakpoint". Đây là bước hay bị bỏ qua. Test ở 700px, 900px, 1100px — những điểm nằm giữa các breakpoint — để chắc chắn không có vùng chết.
Lỗi thường gặp & mẹo
Lỗi 1 — Đặt breakpoint theo tên thiết bị. "Cái này cho iPhone, cái kia cho iPad" là tư duy sai. Thiết bị thay đổi mỗi năm, dải kích thước thì luôn liên tục. Hãy nghĩ theo khoảng, không theo model.
Lỗi 2 — Quá nhiều breakpoint. Người mới thường thêm 6-7 breakpoint vì lo lắng. Hậu quả: code rối, khó bảo trì, dễ mâu thuẫn. Mẹo: phần lớn trang chỉ cần md và lg. Bắt đầu tối thiểu, chỉ thêm khi thực sự thấy layout gãy.
Lỗi 3 — Quên test vùng giữa. Bạn test ở đúng 375, 768, 1024 và thấy ổn, nhưng 700px thì vỡ. Luôn kéo trình duyệt mượt mà qua toàn bộ dải, không chỉ nhảy giữa các mốc.
Lỗi 4 — Trộn lẫn min-width và max-width loạn xạ. Chọn một hướng và giữ nhất quán. Năm 2026 khuyến nghị mobile-first với min-width. Trộn lẫn hai kiểu sẽ tạo ra mâu thuẫn CSS rất khó debug.
Mẹo 1 — Dùng đơn vị rem cho breakpoint khi cần. 768px = 48rem. Đặt breakpoint bằng rem giúp chúng giãn theo cỡ chữ gốc của người dùng — tốt cho accessibility (Bài 42).
Mẹo 2 — Đừng quên ẩn/hiện element. Breakpoint không chỉ đổi layout mà còn quyết định thứ gì hiện ra. Menu hamburger chỉ hiện ở mobile (md:hidden), menu ngang chỉ hiện từ tablet (hidden md:flex).
Mẹo 3 — Làm quen với container query. Khi component của bạn được tái sử dụng ở nhiều vị trí có độ rộng khác nhau, container query là lời giải sạch hơn media query rất nhiều.
Bài tập thực hành
Bài tập 1 — Lập bản đồ breakpoint. Chọn một website Việt Nam bạn thích (Tiki, Shopee, VnExpress, Thế Giới Di Động...). Mở DevTools, kéo giãn từ 320px đến 1920px và ghi lại chính xác tại những độ rộng nào layout thay đổi. So sánh các con số bạn tìm được với bộ chuẩn 640/768/1024/1280. Chúng có khớp không?
Bài tập 2 — Dựng lưới sản phẩm 4 cấp. Tạo một lưới đơn giản hiển thị 8 thẻ sản phẩm với yêu cầu: 1 cột ở mobile, 2 cột từ 640px, 3 cột từ 768px, 4 cột từ 1024px. Viết bằng cả hai cách: CSS media query thuần và Tailwind. So sánh độ dài code.
Bài tập 3 — Tìm và sửa vùng chết. Lấy code bài tập 2, cố tình đặt một breakpoint cứng tại 700px. Kéo trình duyệt và quan sát điều gì xảy ra ở 690px và 710px. Sau đó sửa lại theo bộ chuẩn và xác nhận vùng chết biến mất.
Bài tập 4 — Khóa container. Thêm max-width cho lưới sản phẩm sao cho trên màn hình 2000px, nội dung không vượt quá 1200px và được căn giữa. Quan sát line length của văn bản trước và sau khi khóa.
Tóm tắt
- Breakpoint là độ rộng màn hình tại đó bạn ra lệnh cho layout thay đổi, khai báo qua media query.
- Bộ breakpoint chuẩn của Tailwind CSS —
sm640px,md768px,lg1024px,xl1280px,2xl1536px — đã trở thành chuẩn ngành 2026. Hãy thuộc lòng. - Tất cả tiền tố Tailwind đều là min-width (mobile-first):
md:nghĩa là "từ 768px trở lên", không phải "chỉ tablet". - Các con số breakpoint là mốc thuận tiện để chia dải kích thước, không phải để khớp với một thiết bị cụ thể. Đừng bao giờ đặt breakpoint theo tên điện thoại.
- Tư duy đúng là content-based: kéo trình duyệt, quan sát layout gãy ở đâu, đặt breakpoint tại đó (rồi làm tròn về bộ chuẩn).
- Đa số trang chỉ cần 2-3 breakpoint. Bắt đầu tối thiểu, thêm khi thực sự cần.
- Luôn test vùng giữa các breakpoint để tránh vùng chết, và khóa max-width ở đầu lớn để bảo vệ trải nghiệm đọc.
- Năm 2026, hãy bắt đầu làm quen với container query — breakpoint dựa trên độ rộng component cha thay vì cả màn hình.