Blog Tĩnh #05 – Tạo layout responsive đơn giản

1. Khung layout tối thiểu

Trong style.css, dùng max-width + margin auto + padding:

body {
  max-width: 720px;
  margin: auto;
  padding: 1.5rem;
  line-height: 1.6;
  font-family: system-ui, sans-serif;
}

Lợi ích: bài viết hiển thị tốt trên mọi màn hình – không quá dài, không quá hẹp.

2. Ảnh trong bài viết

Không để ảnh tràn khung. Thêm dòng này vào CSS:

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
}

Vậy là ảnh sẽ tự co lại khi xem trên mobile – không cần <picture> phức tạp.

3. Responsive cho video nhúng

Bọc video (iframe YouTube…) bằng 1 div và dùng trick sau:

<div class="video-wrapper">
  <iframe src="..." frameborder="0"></iframe>
</div>

.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

4. Tối ưu menu và header

Nếu blog bạn có menu ngang:

nav a {
  margin-right: 1rem;
  display: inline-block;
}
@media (max-width: 480px) {
  nav {
    display: flex;
    flex-wrap: wrap;
  }
  nav a {
    flex: 1 0 100%;
    margin-bottom: 0.5rem;
  }
}

Gợi ý: Nếu menu đơn giản, dùng CSS thuần vẫn rất ổn – không cần hamburger icon ngay từ đầu.

5. Căn chữ và khoảng cách dễ đọc

Khoảng cách tốt = trải nghiệm đọc tốt:

h1, h2, h3 {
  margin-top: 2rem;
  line-height: 1.4;
}

p {
  margin-bottom: 1.2rem;
}

ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

6. Test trên thiết bị thật

Đừng chỉ resize trình duyệt. Hãy:

• Mở bằng Chrome DevTools → tab “Devices” → chọn iPhone / Pixel
• Hoặc scan QR từ URL Pages/Netlify để mở trên điện thoại thật

Responsive không nhất thiết phải phức tạp. Nếu blog bạn có nội dung là chính, chỉ cần khung gọn, ảnh co, chữ dễ đọc là đã “thân thiện mobile” hơn cả đống blog chạy Bootstrap nặng nề rồi.

Chúc bạn làm blog tĩnh đẹp – nhẹ – xem mượt trên mọi thiết bị!