Frontend hay gặpResponsive design = một codebase hiển thị tốt trên mọi kích thước màn hình, thay vì làm site riêng cho mobile. Ba mảnh ghép chính:
- Viewport meta:
<meta name="viewport" content="width=device-width, initial-scale=1">— bảo trình duyệt mobile render theo bề rộng thật của thiết bị thay vì giả lập viewport desktop ~980px rồi thu nhỏ. Thiếu tag này thì mọi media query gần như vô nghĩa trên điện thoại. - Media query:
@media (min-width: 768px) { ... }áp CSS theo điều kiện — bề rộng viewport, hướng xoay,prefers-color-scheme,prefers-reduced-motion... - Mobile-first: viết style mặc định cho màn hình nhỏ nhất, rồi dùng
min-widthmở rộng dần lên tablet/desktop — CSS gọn hơn và thiết bị yếu tải ít override hơn so với desktop-first (max-width).
Bổ trợ: layout co giãn bằng flexbox/grid + đơn vị tương đối (%, rem, clamp()), ảnh responsive bằng srcset/sizes. Xu hướng mới: container query — respond theo bề rộng của container thay vì viewport.