Website responsive hiển thị tốt trên mọi thiết bị: desktop, tablet, mobile. Cốt lõi là HTML/CSS linh hoạt, thay đổi kích thước, ẩn/hiện, co giãn nội dung.
Minh họa
(Ảnh minh họa desktop, tablet, mobile bị bỏ do không có file thực tế)
Các khái niệm cốt lõi
1. Viewport Meta Tag
Kiểm soát layout trên mobile browser:
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width: chiều rộng trang theo màn hình thiết bị.initial-scale=1.0: mức zoom ban đầu khi load trang.
2. Media Queries
Đặt breakpoint để thay đổi CSS theo kích thước màn hình:
@media (max-width: 768px) {
.container { flex-direction: column; }
}3. Ảnh responsive
Đặt width: 100%; height: auto; cho <img> để co giãn tự động.
4. Đơn vị tương đối
Dùng rem, em, %, vw, vh thay vì px cố định.
5. Flexbox / CSS Grid
Layout hiện đại tự động sắp xếp, wrap, căn chỉnh linh hoạt.