Media Queries và Viewport Meta Tag

Bài học này tập trung vào việc sử dụng Media Queries và Viewport Meta Tag, hai công cụ quan trọng trong việc phát triển thiết kế web phản hồi (Responsive Web Design).

• Media Queries: Giúp bạn áp dụng các quy tắc CSS tùy theo kích thước màn hình hoặc các điều kiện cụ thể như độ phân giải, hướng (portrait/landscape), v.v.
• Viewport Meta Tag: Đảm bảo rằng các trang web hiển thị chính xác trên các thiết bị khác nhau, đặc biệt là thiết bị di động.

1. Media Queries

• Cú pháp cơ bản:

  @media (điều kiện) {
      /* Quy tắc CSS áp dụng khi điều kiện thỏa mãn */
  }
  

  Ví dụ:

  @media (max-width: 768px) {
      body {
          background-color: lightblue;
      }
  }
  

• Các điều kiện phổ biến:

  • max-width: Kích thước tối đa của màn hình.
  • min-width: Kích thước tối thiểu của màn hình.
  • orientation: Hướng màn hình (portrait hoặc landscape).

• Breakpoints phổ biến:

  /* Mobile (nhỏ hơn 576px) */
  @media (max-width: 575.98px) { ... }
  
  /* Tablet (576px - 767px) */
  @media (min-width: 576px) and (max-width: 767.98px) { ... }
  
  /* Desktop (lớn hơn 768px) */
  @media (min-width: 768px) { ... }
  

2. Viewport Meta Tag

• Thẻ meta này cho trình duyệt biết cách hiển thị trang trên các thiết bị khác nhau:

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• Thuộc tính:

  • width=device-width: Đặt chiều rộng trang bằng với chiều rộng màn hình thiết bị.
  • initial-scale=1.0: Đặt mức thu phóng ban đầu.

3. Bài tập thực hành

1. Tạo một file HTML sử dụng Media Queries để thay đổi màu nền khi:

   • Màn hình nhỏ hơn 576px: nền đỏ.
   • Màn hình từ 576px đến 768px: nền xanh lá.
   • Màn hình lớn hơn 768px: nền xanh dương.

2. Sử dụng thẻ meta viewport để làm cho thiết kế của bạn thân thiện với di động.

Kết luận

Media Queries và Viewport Meta Tag là hai công cụ cốt lõi để xây dựng các thiết kế web hiện đại và thân thiện với mọi thiết bị. Trong khi Media Queries cho phép bạn tùy chỉnh giao diện dựa trên kích thước màn hình hoặc các điều kiện khác, Viewport Meta Tag đảm bảo trang web hiển thị đúng tỷ lệ trên các thiết bị di động.

Bằng cách sử dụng kết hợp hai công cụ này, bạn có thể tạo ra những trang web không chỉ đẹp mắt mà còn tối ưu hóa trải nghiệm người dùng trên mọi nền tảng. Hãy thực hành nhiều để hiểu rõ cách ứng dụng chúng vào dự án thực tế của bạn!