Bài 8.2: Media queries và breakpoints

Chào mừng bạn quay trở lại với hành trình chinh phục Lập trình Web Front-end! Sau khi đã nắm vững các kiến thức cơ bản về HTML và CSS, giờ là lúc chúng ta bước vào một khu vực quan trọng bậc nhất trong thế giới phát triển giao diện: Responsive Web Design (Thiết kế web phản hồi).

Trong thế giới kỹ thuật số ngày nay, người dùng truy cập website của bạn trên đủ loại thiết bị: điện thoại thông minh màn hình nhỏ, máy tính bảng cỡ trung, laptop với nhiều độ phân giải khác nhau, và cả những màn hình máy tính để bàn siêu rộng. Câu hỏi đặt ra là: Làm thế nào để một website duy nhất có thể hiển thị đẹp mắt và hoạt động tốt trên tất cả các thiết bị này?

Câu trả lời nằm ở Media Queries và Breakpoints – hai khái niệm không thể thiếu cho bất kỳ Front-end Developer hiện đại nào.

Tại sao cần Media Queries và Breakpoints?

Hãy tưởng tượng bạn thiết kế một website với bố cục 3 cột hoàn hảo cho màn hình máy tính. Nếu mở trang đó trên điện thoại, 3 cột này sẽ bị bóp méo, chữ quá nhỏ hoặc nội dung bị tràn ra ngoài. Trải nghiệm người dùng sẽ tệ hại.

Responsive Web Design (RWD) sinh ra để giải quyết vấn đề này. RWD là phương pháp thiết kế để bố cục và nội dung của website có thể tự động điều chỉnh sao cho phù hợp với kích thước màn hình và đặc điểm của thiết bị mà người dùng đang sử dụng.

Và công cụ ma thuật giúp chúng ta làm được điều đó chính là Media Queries.

Media Queries: Cánh cửa đến sự thích ứng

Media Query là một tính năng của CSS3 cho phép bạn áp dụng các bộ quy tắc CSS chỉ khi trình duyệt đáp ứng một hoặc nhiều điều kiện nhất định. Điều kiện này thường liên quan đến các đặc điểm của thiết bị hiển thị, phổ biến nhất là chiều rộng màn hình.

Cú pháp cơ bản của Media Query trông như thế này:

@media <kiểu_phương_tiện> and (<đặc_điểm_phương_tiện>: <giá_trị>) {
  /* Các quy tắc CSS sẽ áp dụng khi điều kiện đúng */
}

Hãy cùng phân tích các phần:

@media: Từ khóa bắt đầu một Media Query.
<kiểu_phương_tiện> (Media Type): Xác định loại thiết bị mà query áp dụng.
- screen: Màn hình máy tính, tablet, điện thoại (phổ biến nhất cho web).
- print: Áp dụng khi in trang.
- all: Áp dụng cho tất cả các loại phương tiện.
- Còn nhiều loại khác nhưng ít dùng hơn cho RWD thông thường.
and: Toán tử logic dùng để kết hợp nhiều điều kiện (có thể dùng not hoặc dấu phẩy , tương đương or).
(<đặc_điểm_phương_tiện>: <giá_trị>) (Media Feature): Đây là điều kiện cụ thể cần kiểm tra. Có rất nhiều đặc điểm, nhưng phổ biến nhất cho RWD là:
- width: Chiều rộng viewport (khu vực hiển thị của trình duyệt).
- min-width: Áp dụng khi chiều rộng ít nhất là giá trị này (lớn hơn hoặc bằng). Rất phổ biến cho chiến lược Mobile-First.
- max-width: Áp dụng khi chiều rộng tối đa là giá trị này (nhỏ hơn hoặc bằng). Rất phổ biến cho chiến lược Desktop-First.
- height, min-height, max-height: Chiều cao viewport.
- orientation: Hướng của thiết bị (portrait - dọc, landscape - ngang).
- Còn nhiều đặc điểm khác như resolution, hover, pointer, v.v.

Breakpoints: Nơi thiết kế "bẻ gãy" và chuyển mình

Breakpoints là những điểm cụ thể về kích thước màn hình (thường là chiều rộng) mà tại đó bố cục hoặc kiểu dáng của website thay đổi để phù hợp hơn với thiết bị.

Ví dụ, bạn có thể quyết định rằng ở chiều rộng dưới 768px, website sẽ chuyển sang bố cục một cột, và từ 768px trở lên sẽ là hai cột. Điểm 768px chính là một breakpoint.

Breakpoints được định nghĩa thông qua các Media Queries. Khi chiều rộng màn hình vượt qua (với min-width) hoặc nhỏ hơn (với max-width) một giá trị breakpoint, bộ quy tắc CSS bên trong Media Query sẽ được áp dụng, làm thay đổi giao diện.

Chiến lược Breakpoints: Mobile-First vs. Desktop-First

Có hai cách tiếp cận phổ biến để đặt breakpoints:

Mobile-First (Ưu tiên thiết bị di động):
- Bạn viết CSS mặc định cho màn hình nhỏ nhất (điện thoại).
- Sau đó, bạn sử dụng Media Query với min-width để thêm/ghi đè (override) các kiểu dáng cho màn hình lớn hơn.
- Ưu điểm: Thường dễ quản lý CSS hơn, tối ưu tốt hơn cho thiết bị di động (vì base styles là cho mobile), và khuyến khích bạn suy nghĩ về nội dung và chức năng cốt lõi trước.
- Ví dụ:
```
/* Base styles for mobile */
body {
  font-size: 16px;
}
.container {
  flex-direction: column; /* Default stack vertically */
}

/* Styles for screens >= 768px (tablet/desktop) */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px; /* Slightly larger font */
  }
  .container {
    flex-direction: row; /* Arrange horizontally */
  }
}

/* Styles for screens >= 1200px (large desktop) */
@media screen and (min-width: 1200px) {
  body {
    font-size: 20px; /* Even larger font */
  }
}
```
  Giải thích: Các style cơ bản là cho mobile. Khi màn hình đạt 768px, font-size tăng và container chuyển từ xếp dọc sang xếp ngang. Khi đạt 1200px, font-size tăng tiếp. Các quy tắc min-width thêm vào và ghi đè lên các quy tắc trước đó.
Desktop-First (Ưu tiên thiết bị máy tính):
- Bạn viết CSS mặc định cho màn hình lớn nhất (máy tính để bàn).
- Sau đó, bạn sử dụng Media Query với max-width để ghi đè các kiểu dáng cho màn hình nhỏ hơn.
- Ưu điểm: Có thể quen thuộc hơn nếu bạn đã quen thiết kế cho desktop trước đây.
- Nhược điểm: CSS có thể trở nên phức tạp hơn vì bạn liên tục phải "undo" hoặc chỉnh sửa các style lớn cho màn hình nhỏ. Ít tối ưu cho mobile từ đầu.
- Ví dụ:
```
/* Base styles for desktop */
body {
  font-size: 20px;
}
.container {
  flex-direction: row; /* Default horizontal */
}

/* Styles for screens <= 1199px (laptop/tablet) */
@media screen and (max-width: 1199px) {
  body {
    font-size: 18px; /* Smaller font */
  }
}

/* Styles for screens <= 767px (mobile) */
@media screen and (max-width: 767px) {
  body {
    font-size: 16px; /* Even smaller font */
  }
  .container {
    flex-direction: column; /* Stack vertically */
  }
}
```
  Giải thích: Các style cơ bản là cho desktop. Khi màn hình nhỏ hơn hoặc bằng 1199px, font-size giảm. Khi nhỏ hơn hoặc bằng 767px, font-size giảm tiếp và container chuyển từ xếp ngang sang xếp dọc. Các quy tắc max-width ghi đè lên các quy tắc mặc định.

Lời khuyên: Chiến lược Mobile-First thường được khuyến khích hơn trong thực tế hiện đại. Bắt đầu từ những gì đơn giản nhất (màn hình nhỏ) và tăng cường (enhance) dần cho màn hình lớn hơn.

Các ví dụ minh họa về Media Queries

Hãy xem một vài ví dụ cụ thể hơn để thấy Media Queries hoạt động như thế nào.

Ví dụ 1: Thay đổi màu nền theo kích thước màn hình

Chúng ta sẽ thay đổi màu nền của trang khi vượt qua các ngưỡng chiều rộng nhất định.

HTML: (File index.html)

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Media Queries Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Xem màu nền thay đổi khi thay đổi kích thước cửa sổ trình duyệt!</h1>
</body>
</html>

CSS: (File style.css)

/* Default styles (Mobile-First base) */
body {
  background-color: lightblue; /* Màu nền mặc định cho màn hình nhỏ */
  color: #333;
  text-align: center;
  padding: 20px;
  transition: background-color 0.5s ease; /* Thêm hiệu ứng chuyển đổi mượt mà */
}

h1 {
    margin-top: 50px;
}

/* Styles for screens wider than 600px */
/* Đây là breakpoint đầu tiên của chúng ta */
@media screen and (min-width: 600px) {
  body {
    background-color: lightgreen; /* Màu nền cho màn hình từ 600px trở lên */
  }
}

/* Styles for screens wider than 900px */
/* Đây là breakpoint thứ hai */
@media screen and (min-width: 900px) {
  body {
    background-color: lightsalmon; /* Màu nền cho màn hình từ 900px trở lên */
  }
}

Giải thích:
- Ban đầu, body có màu nền lightblue (style mặc định).
- Khi chiều rộng trình duyệt đạt hoặc vượt quá 600px, Media Query đầu tiên kích hoạt, ghi đè màu nền thành lightgreen.
- Khi chiều rộng trình duyệt đạt hoặc vượt quá 900px, Media Query thứ hai kích hoạt, ghi đè màu nền thành lightsalmon.
- Lưu ý cách các quy tắc với min-width được viết theo thứ tự tăng dần của breakpoint.

Ví dụ 2: Thay đổi bố cục từ một cột sang hai cột

Chúng ta sẽ tạo một bố cục đơn giản với hai div bên trong một container. Mặc định chúng xếp dọc (trên mobile), và xếp ngang khi màn hình đủ rộng (trên tablet/desktop).

HTML: (File index.html)

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Layout Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="box">
      <h2>Box 1</h2>
      <p>Nội dung của box đầu tiên.</p>
    </div>
    <div class="box">
      <h2>Box 2</h2>
      <p>Nội dung của box thứ hai.</p>
    </div>
  </div>
</body>
</html>

CSS: (File style.css)

body {
  font-family: sans-serif;
  padding: 10px;
}

.container {
  display: flex;
  /* Default: flex-direction: row; */
  /* Để làm Mobile-First, chúng ta sẽ đặt flex-direction mặc định là column */
  flex-direction: column; /* Xếp dọc mặc định cho màn hình nhỏ */
  gap: 20px; /* Khoảng cách giữa các box */
}

.box {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

/* Breakpoint cho màn hình từ 768px trở lên (tablet/desktop) */
@media screen and (min-width: 768px) {
  .container {
    flex-direction: row; /* Chuyển sang xếp ngang trên màn hình lớn */
  }

  .box {
    flex: 1; /* Mỗi box chiếm phần bằng nhau trong container */
  }
}

Giải thích:
- Mặc định (.container không nằm trong Media Query), các div con (.box) bên trong container flexbox được xếp theo chiều dọc (flex-direction: column).
- Khi chiều rộng trình duyệt đạt hoặc vượt quá 768px, Media Query kích hoạt.
- Quy tắc .container { flex-direction: row; } ghi đè lên giá trị mặc định, làm cho các box xếp theo chiều ngang.
- Quy tắc .box { flex: 1; } trong Media Query đảm bảo rằng cả hai box sẽ cùng nhau lấp đầy chiều rộng của container (mỗi box chiếm một phần bằng nhau).

Ví dụ 3: Kết hợp `min-width` và `max-width` cho một khoảng breakpoint cụ thể

Đôi khi bạn muốn áp dụng style chỉ cho một phạm vi kích thước nhất định (ví dụ: chỉ trên máy tính bảng, không phải điện thoại hay desktop lớn). Bạn có thể kết hợp min-width và max-width bằng toán tử and.

CSS:

.special-element {
  font-size: 1rem; /* Default font size */
  padding: 10px;
  margin: 10px;
  text-align: center;
  background-color: #eee;
}

/* Styles CHỈ áp dụng cho màn hình có chiều rộng TỪ 768px ĐẾN 1024px */
/* Đây có thể là breakpoint cho các loại tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .special-element {
    background-color: lightyellow; /* Màu nền đặc biệt */
    border: 2px dashed orange; /* Viền gạch ngang màu cam */
    font-size: 1.2rem; /* Tăng kích thước font */
    padding: 20px;
  }
}

Giải thích:
- Element với class special-element có các style mặc định.
- Media Query thứ hai có hai điều kiện kết hợp bởi and: chiều rộng phải ít nhất 768px VÀ chiều rộng phải tối đa 1024px.
- Chỉ khi cả hai điều kiện cùng đúng (nghĩa là chiều rộng nằm trong khoảng [768px, 1024px]), các style bên trong Media Query mới được áp dụng.

Các Breakpoint phổ biến (Chỉ mang tính tham khảo)

Không có bộ breakpoints "đúng" duy nhất. Các breakpoints tốt nhất là những điểm mà tại đó thiết kế của bạn bắt đầu trông không ổn và cần được điều chỉnh. Tuy nhiên, có một số giá trị phổ biến thường được sử dụng dựa trên kích thước màn hình của các thiết bị phổ biến:

Small devices (Phones): < 576px
Medium devices (Tablets): ≥ 576px hoặc ≥ 768px
Large devices (Desktops): ≥ 992px
Extra large devices (Large Desktops): ≥ 1200px

Lưu ý rằng các framework CSS như Bootstrap hay Tailwind CSS có bộ breakpoints riêng của họ, thường dựa trên các giá trị này.

Khi bạn thiết kế, hãy kéo giãn và thu nhỏ cửa sổ trình duyệt (hoặc sử dụng công cụ Developer Tools) và quan sát xem bố cục của bạn "bị hỏng" ở điểm nào. Những điểm đó chính là nơi bạn cần đặt breakpoints.

Một số lưu ý khi sử dụng Media Queries

Meta Viewport: Luôn đảm bảo bạn có thẻ <meta name="viewport" content="width=device-width, initial-scale=1.0"> trong phần <head> của HTML. Thẻ này yêu cầu trình duyệt di động sử dụng chiều rộng thực của thiết bị chứ không phải thu nhỏ trang lại theo mặc định. Thiếu thẻ này, Media Queries sẽ không hoạt động đúng trên mobile.
Sử dụng đơn vị tương đối: Kết hợp Media Queries với các đơn vị tương đối như %, vw, vh, rem, em sẽ giúp thiết kế của bạn linh hoạt hơn nữa giữa các breakpoints.
Tổ chức CSS: Với nhiều Media Queries, file CSS có thể trở nên lớn và khó quản lý. Hãy cố gắng nhóm các style liên quan lại hoặc sử dụng các phương pháp tổ chức CSS tiên tiến hơn (ví dụ: SASS/LESS với nested media queries).
Kiểm thử: Luôn kiểm thử trên nhiều thiết bị và kích thước màn hình khác nhau (thực tế hoặc sử dụng công cụ giả lập trong trình duyệt).

Comments

There are no comments at the moment.