Login

Responsive design: tư duy mobile-first và media query

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Ngày nay người dùng truy cập web bằng mọi cỡ màn hình: điện thoại, máy tính bảng, laptop, màn hình lớn. Responsive design là cách xây dựng một trang web duy nhất nhưng hiển thị tốt trên tất cả. Bài viết này giới thiệu tư duy mobile-first và các công cụ thiết yếu.

Ba nền tảng của responsive

  1. Thẻ viewport trong HTML: <meta name='viewport' content='width=device-width, initial-scale=1.0'>. Thiếu nó, mọi thứ bên dưới đều không hoạt động đúng trên điện thoại.
  2. Bố cục linh hoạt: dùng đơn vị tương đối, Flexbox và Grid thay vì chiều rộng cố định bằng pixel.
  3. Media query: áp dụng CSS khác nhau tùy theo đặc điểm màn hình.

Mobile-first là gì?

Mobile-first nghĩa là bạn viết CSS cho màn hình nhỏ trước, sau đó mới thêm quy tắc cho màn hình lớn hơn bằng min-width. Có nhiều lý do để làm vậy:

  • Màn hình nhỏ buộc bạn tập trung vào nội dung quan trọng nhất.
  • CSS cơ bản đơn giản hơn: thường chỉ là một cột, xếp chồng.
  • Thiết bị di động chỉ cần xử lý những quy tắc cần thiết, nên có lợi cho hiệu năng.
  • Thêm tính năng cho màn hình lớn thường dễ hơn là gỡ bớt khỏi thiết kế dành cho màn hình lớn.

Media query cơ bản

.cards {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;          /* điện thoại: một cột */
}

@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

Cách đọc: mặc định một cột; khi chiều rộng từ 640 pixel trở lên thì hai cột; từ 1024 pixel trở lên thì ba cột. Các mốc 640, 768, 1024 chỉ là quy ước phổ biến. Điều quan trọng hơn là chọn breakpoint dựa trên chỗ nội dung của bạn bị vỡ, không phải dựa trên tên thiết bị.

Đơn vị linh hoạt

  • %: theo kích thước của phần tử cha.
  • rem: theo cỡ chữ gốc, giúp giao diện tôn trọng thiết lập cỡ chữ của người dùng.
  • vw và vh: theo chiều rộng và chiều cao khung nhìn.
  • clamp(min, ưu tiên, max): giới hạn giá trị trong một khoảng.
h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
}

Tiêu đề trên tự co giãn theo chiều rộng màn hình nhưng không bao giờ nhỏ hơn 1.75rem hay lớn hơn 3rem, và bạn không cần media query nào.

Hình ảnh responsive

Quy tắc đơn giản nhất giúp ảnh không tràn khỏi khung:

img {
  max-width: 100%;
  height: auto;
}

Với ảnh lớn, bạn có thể dùng thuộc tính srcset và sizes để trình duyệt chọn file phù hợp kích thước, giúp tiết kiệm băng thông trên điện thoại.

Các lỗi thường gặp

  1. Cuộn ngang không mong muốn: thường do phần tử có chiều rộng cố định lớn hơn màn hình, hoặc bảng và khối code quá dài. Dùng DevTools tìm phần tử gây tràn.
  2. Vùng bấm quá nhỏ: nút và liên kết trên điện thoại cần đủ lớn để chạm bằng ngón tay, thường tối thiểu khoảng 44 pixel mỗi chiều là một khuyến nghị phổ biến.
  3. Chỉ kiểm tra bằng cách thu nhỏ cửa sổ: hãy thử cả trên thiết bị thật nếu có thể, vì cảm ứng, bàn phím ảo và thanh địa chỉ co giãn đều ảnh hưởng.
  4. Ẩn nội dung thay vì sắp xếp lại: người dùng điện thoại cũng cần nội dung đó.

Thử trong DevTools

Trong Chrome hoặc Firefox, bật chế độ thiết bị (device toolbar), chọn kích thước có sẵn hoặc kéo tùy ý. Quan sát điểm mà bố cục bắt đầu xấu đi, đó chính là chỗ cần đặt breakpoint. Bạn cũng có thể giả lập mạng chậm để xem trang tải ra sao.

Container query: bước tiến tiếp theo

Media query dựa trên kích thước cả khung nhìn, nhưng một thành phần như thẻ sản phẩm có thể được đặt ở sidebar hẹp hoặc ở vùng nội dung rộng. Container query cho phép thành phần phản ứng theo kích thước của chính khung chứa nó:

.wrapper { container-type: inline-size; }

@container (min-width: 400px) {
  .card { display: flex; gap: 16px; }
}

Tính năng này đã được các trình duyệt hiện đại hỗ trợ, nhưng bạn vẫn nên kiểm tra bảng tương thích trước khi dùng cho dự án có người dùng trình duyệt cũ. Với người mới, hãy thành thạo media query trước, rồi tìm hiểu container query khi bắt đầu xây các thành phần dùng lại ở nhiều nơi.

Kết luận

Responsive không chỉ là "co giãn cho vừa", mà là thiết kế để mọi người dùng đều có trải nghiệm tốt. Hãy nhớ công thức: viewport, bố cục linh hoạt, mobile-first với min-width, và kiểm tra bằng thiết bị thật.

Bạn có thể áp dụng những điều này vào một dự án hoàn chỉnh thông qua các khóa học trên codebem.com nếu thấy phù hợp.

author_photo
Nguyễn Đình Cường

0 comment