Responsive web là gì?

Responsive nghĩa là trang web tự điều chỉnh bố cục để hiển thị đẹp trên mọi kích thước màn hình — từ điện thoại nhỏ tới máy tính lớn — thay vì bị vỡ hay phải phóng to/thu nhỏ thủ công. Với lượng người dùng điện thoại rất lớn hiện nay, làm trang responsive gần như là bắt buộc.

Thẻ meta viewport để làm gì?

Đây là dòng bắt buộc để trang hiển thị đúng trên điện thoại: . Nó bảo trình duyệt dùng đúng chiều rộng thiết bị thay vì giả lập màn hình rộng rồi thu nhỏ. Thiếu thẻ này, trang sẽ hiện chữ li ti trên điện thoại dù bạn đã viết media query.

Media query trong CSS là gì?

Media query cho phép áp dụng CSS khác nhau tùy kích thước màn hình. Ví dụ @media (max-width: 600px) { ... } nghĩa là các quy tắc bên trong chỉ áp dụng khi màn hình rộng tối đa 600px (điện thoại). Nhờ đó bạn có thể đổi bố cục, cỡ chữ, ẩn/hiện phần tử cho vừa màn hình nhỏ.

Web cơ bản Bài 7: CSS responsive cho điện thoại (30 phút)

Bài 6 bạn đã xếp bố cục bằng Flexbox. Nhưng thử mở trang trên điện thoại xem — chữ có thể li ti, bố cục tràn ngang. Giờ ta làm trang responsive: tự co giãn đẹp trên mọi màn hình, nhất là điện thoại (nơi có nhiều người dùng nhất). Bài này gói ba thứ cốt lõi: thẻ viewport, đơn vị linh hoạt, và media query.

⏱️ Cách học bài này (~30 phút): đọc viewport + đơn vị + media query (12’), tự gõ và thu nhỏ cửa sổ để xem (12’), lưu file mang về (6’).

Mục tiêu bài học

Sau bài này bạn sẽ:

Thêm thẻ meta viewport (bắt buộc cho điện thoại).
Dùng đơn vị linh hoạt (%, max-width) thay cho kích thước cứng.
Cho ảnh co giãn theo khung.
Viết media query để đổi bố cục trên màn hình nhỏ.

Nội dung: làm trang responsive

1. Thẻ viewport (bắt buộc, làm trước tiên)

Thêm dòng này vào <head> — thiếu nó, mọi media query đều vô nghĩa trên điện thoại:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
</head>

Nó bảo trình duyệt: dùng đúng chiều rộng thật của thiết bị, không giả lập màn hình rộng rồi thu nhỏ.

2. Đơn vị linh hoạt thay kích thước cứng

Tránh đặt bề rộng cố định (px) cho khối lớn; dùng % và max-width:

* { box-sizing: border-box; }   /* để padding không làm tràn ngang */

body {
  max-width: 700px;   /* không rộng quá trên màn lớn */
  width: 100%;        /* co lại vừa màn nhỏ */
  margin: 0 auto;     /* căn giữa */
  padding: 0 16px;
}

max-width + width: 100% = rộng tối đa 700px trên máy tính, nhưng tự co trên điện thoại. Dòng box-sizing: border-box bắt buộc ở đây: nó tính padding vào trong bề rộng, nếu thiếu thì width:100% cộng thêm 32px padding sẽ tràn ngang trên điện thoại.

3. Ảnh co giãn

Ảnh cứng dễ tràn màn hình nhỏ. Cho ảnh không vượt quá khung:

img {
  max-width: 100%;   /* ảnh không rộng hơn khung chứa */
  height: auto;      /* giữ đúng tỉ lệ */
}

4. Media query — đổi bố cục theo màn hình

Áp CSS riêng cho màn hình nhỏ:

/* Mặc định: máy tính */
.ky-nang { display: flex; gap: 12px; }

/* Điện thoại: màn rộng tối đa 600px */
@media (max-width: 600px) {
  body { font-size: 15px; }        /* chữ vừa hơn */
  .ky-nang { flex-direction: column; }  /* thẻ xếp dọc thay vì hàng ngang */
}

Mọi quy tắc trong @media (max-width: 600px) { ... } chỉ áp dụng khi màn hình ≤ 600px.

Code mẫu có chú thích: trang cá nhân responsive

Thêm vào style.css (đã có thẻ viewport như mục 1):

* { box-sizing: border-box; }   /* padding không gây tràn ngang */

body {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; }   /* ảnh co giãn */

@media (max-width: 600px) {
  body { font-size: 15px; }
  h1 { font-size: 24px; }          /* tiêu đề nhỏ lại cho vừa */
  .ky-nang { flex-direction: column; }  /* kỹ năng xếp dọc trên điện thoại */
}

Cách chạy: lưu file, mở trang rồi thu nhỏ chiều rộng cửa sổ trình duyệt (hoặc bật chế độ điện thoại trong DevTools bằng F12) — bạn sẽ thấy chữ nhỏ lại, các thẻ kỹ năng chuyển từ hàng ngang sang xếp dọc khi màn đủ hẹp.

Bài thực hành code (tự gõ)

Bài 1 — Viewport & ảnh: thêm thẻ meta viewport vào <head> và quy tắc img { max-width: 100%; height: auto; }. Thu nhỏ cửa sổ xem ảnh có tràn không.

Bài 2 — Media query cỡ chữ: thêm @media (max-width: 600px) { body { font-size: 15px; } } và quan sát chữ đổi khi thu nhỏ.

Bài 3 — Đổi bố cục: cho một hàng Flexbox chuyển sang flex-direction: column trong media query để nó xếp dọc trên điện thoại.

Lỗi thường gặp & cách sửa

Trang vẫn li ti trên điện thoại dù có media query → quên thẻ meta viewport. Đây là lỗi số một; thêm nó vào <head> trước.
Ảnh tràn ngang → thiếu img { max-width: 100%; }.
Trang có thanh cuộn ngang / nội dung nhích ra mép → khối có width:100% kèm padding mà thiếu box-sizing: border-box. Thêm * { box-sizing: border-box; }.
Media query không tác dụng → sai cú pháp: nhớ @media (max-width: 600px) { ... } và đủ dấu ngoặc { }.
Dùng px cứng cho khối lớn → không co được. Thay bằng % / max-width.
Test chưa kỹ → dùng DevTools (F12) → chế độ thiết bị để xem nhiều kích thước, đừng chỉ đoán.

💾 Mang về — CSS responsive khởi đầu

Giữ đoạn này (kèm thẻ viewport trong HTML) làm nền responsive cho cả series:

* { box-sizing: border-box; }
body { max-width: 700px; width: 100%; margin: 0 auto; padding: 0 16px; line-height: 1.6; }
img { max-width: 100%; height: auto; }
.ky-nang { display: flex; gap: 12px; }   /* base từ Bài 6 — cần có thì flex-direction mới tác dụng */
@media (max-width: 600px) {
  body { font-size: 15px; }
  h1 { font-size: 24px; }
  .ky-nang { flex-direction: column; }
}

⚠️ flex-direction: column chỉ có tác dụng khi phần tử đã có display: flex (đặt từ Bài 6). Nếu copy riêng đoạn này sang file mới, nhớ giữ dòng .ky-nang { display: flex; }.

Thuật ngữ chốt

Thuật ngữ	Giải thích ngắn
responsive	Trang tự co giãn đẹp trên mọi màn hình
meta viewport	Thẻ bắt buộc để hiển thị đúng trên điện thoại
media query	`@media (...)` áp CSS theo kích thước màn hình
max-width	Bề rộng tối đa; kết hợp `width:100%` để co giãn
`max-width: 100%` (ảnh)	Ảnh không tràn khỏi khung chứa
breakpoint	Mốc kích thước để đổi bố cục (vd 600px)

Tự kiểm tra

Thiếu thẻ nào thì media query vô tác dụng trên điện thoại? (Đáp án: meta viewport)
Cho ảnh không tràn màn hình nhỏ dùng gì? (Đáp án: img { max-width: 100%; height: auto; })
@media (max-width: 600px) áp dụng khi nào? (Đáp án: khi màn hình rộng tối đa 600px)

Ghi nhớ nhanh

Thẻ meta viewport trước tiên — không có nó thì responsive vô nghĩa.
Dùng % + max-width thay px cứng; ảnh: max-width: 100%.
@media (max-width: ...) để đổi cỡ chữ/bố cục cho điện thoại.

Bài tập về nhà: làm trang cá nhân của bạn hiển thị gọn đẹp trên điện thoại (thu nhỏ cửa sổ kiểm tra). Bài tiếp theo: Bài 8 — JavaScript: biến, hàm, sự kiện (sắp đăng) — ta bắt đầu làm trang có tương tác.

Bài 7: CSS — responsive cho điện thoại