Thay đổi Layout theo kích thước màn hình với CSS Media Queries

Responsive layout thay đổi số cột, chiều rộng tùy theo breakpoint màn hình. Dùng Media Queries + Flexbox/Grid.

Ví dụ mã nguồn (Cải tiến với Flexbox)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
  body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
  * { box-sizing: border-box; }
  .colContainer { display: flex; flex-wrap: wrap; gap: 20px; }
  .col {
    flex: 1 1 200px; /* Tối thiểu 200px, tự co giãn */
    color: white;
    padding: 20px;
    text-align: center;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }
  /* Không cần media query phức tạp nhờ flex: 1 1 200px */
  /* Tự động: >800px = 4 cột, 600-800px = 2 cột, <600px = 1 cột */
</style>
</head>
<body>
<h1>Responsive Layout với Flexbox</h1>
<h2>Resize màn hình để thấy cột tự điều chỉnh</h2>
<div class="colContainer">
  <div class="col" style="background-color: rgb(153, 29, 224);">First col</div>
  <div class="col" style="background-color: rgb(12, 126, 120);">Second col</div>
  <div class="col" style="background-color: rgb(207, 41, 91);">Third col</div>
  <div class="col" style="background-color: rgb(204, 91, 39);">Fourth col</div>
</div>
</body>
</html>

Giải thích Flexbox tự responsive

flex: 1 1 200px nghĩa là: flex-grow: 1 (chia đều không gian thừa), flex-shrink: 1 (cho co lại), flex-basis: 200px (kích thước cơ sở tối thiểu). Trình duyệt tự tính: nếu container đủ rộng cho 4 cột 200px → 4 cột; chỉ đủ 2 → 2 cột; chỉ đủ 1 → 1 cột.

/* Mobile first */
.col { width: 100%; }

/* Tablet */
@media (min-width: 600px) { .col { width: 50%; } }

/* Desktop */
@media (min-width: 900px) { .col { width: 25%; } }