Thiết kế đáp ứng & Điểm ngắt

TL;DR / Tóm tắt

Thiết kế responsive đảm bảo website của bạn hiển thị đẹp trên mọi thiết bị – từ điện thoại đến máy tính để bàn. Bài viết này giải thích cách media queries hoạt động, cách chọn điểm dừng (breakpoints), và cách Nilead cung cấp các công cụ linh hoạt (bao gồm cả điểm dừng tùy chỉnh và hỗ trợ hình ảnh responsive) để xây dựng website thích ứng, bền vững cho tương lai.

Yêu cầu trước

• Hiểu biết cơ bản về CSS và bố cục website

• Một dự án đã được mở trong Nilead Visual Editor

• Quyền truy cập vào stylesheet toàn cục hoặc stylesheet cấp trang

• (Không bắt buộc) Quen thuộc với thẻ HTML img và thuộc tính của nó

Media Queries: Là gì?

Media queries cho phép bạn áp dụng các style CSS dựa trên các đặc điểm cụ thể của thiết bị hoặc trình duyệt. Chúng rất quan trọng cho thiết kế responsive.

Ví dụ:

/* Khi trình duyệt có chiều rộng từ 600px trở lên */
@media screen and (min-width: 600px) {
  .element {
    font-size: 1.2rem;
  }
}

Điều này chỉ áp dụng style khi trình duyệt có độ rộng từ 600px trở lên.

Cấu trúc của một Media Query

Các loại Media

• all – Mặc định. Áp dụng cho tất cả các thiết bị.

• screen – Màn hình như máy tính để bàn, máy tính bảng, điện thoại.

• print – Xem trước khi in và in ra giấy.

• speech – Đầu đọc màn hình và các công cụ tương tự.

Đặc tính Media

Những thuộc tính này mô tả đặc điểm cụ thể của thiết bị:

@media (orientation: landscape) { ... }
@media (hover: hover) { ... } // Nhận diện con trỏ có thể hover
@media (pointer: fine) { ... } // Nhận diện độ chính xác của thiết bị nhập liệu

Kết hợp các loại media và đặc tính bằng and, ,, hoặc not.

Ví dụ lồng nâng cao:

@media screen and (min-width: 50em), print and (not (color)) {  body { background: lightgray; }
}

Các loại Media

• all: Áp dụng cho mọi thiết bị

• print: Áp dụng cho các tài liệu xem ở chế độ xem trước khi in hoặc bất kỳ phương tiện nào chia nội dung thành các trang để in.

• screen: Áp dụng cho các thiết bị có màn hình

• speech: Áp dụng cho các thiết bị đọc nội dung thành âm thanh, như trình đọc màn hình.

Đặc tính Media

@media (orientation: landscape) {     
  body {
    color: rebeccapurple;
  } 
}

Chất lượng hiển thị

Màu sắc

Tương tác

@media (hover: hover) {
  body {
    color: rebeccapurple;
  }
}

Lưu ý: Với hover, bạn có thể kiểm tra xem người dùng có khả năng di chuyển chuột qua một phần tử hay không, điều này về cơ bản nghĩa là họ đang sử dụng thiết bị trỏ; màn hình cảm ứng và điều hướng bằng bàn phím không hỗ trợ hover.

Tùy chọn của người dùng

Sử dụng min- và max- để so khớp giá trị trong khoảng

body {
  background-color: #fff;
}

@media (min-width: 30em) and (max-width: 80em) {
  body {
    background-color: purple;
  }
}

Lồng nhau và ra quyết định phức tạp

@media (min-width: 20em), not all and (min-height: 40em) {  
  @media not all and (pointer: none) { ... }
  @media screen and ( (min-width: 50em) and (orientation: landscape) ), print and ( not (color) ) { ... }
}

Lưu ý: Để kết hợp nhiều thuộc tính media, bạn có thể sử dụng and tương tự như minh họa ở trên để kết hợp loại media và thuộc tính.

Nếu bạn có một tập hợp truy vấn, bất kỳ truy vấn nào trong số đó cũng có thể khớp, bạn có thể áp dụng logic bằng cách sử dụng dấu phẩy để tách các truy vấn này.

Bạn có thể phủ định toàn bộ truy vấn media bằng toán tử not.

Chọn Breakpoint

Breakpoint xác định khi nào bố cục thiết kế của bạn điều chỉnh cho các kích thước màn hình khác nhau. Thay vì nhắm đến từng thiết bị, hãy nhắm đến dải kích thước.

Breakpoint phổ biến:

• < 600px: Điện thoại

• 600px – 1024px: Máy tính bảng

• 1024px – 1440px: Laptop

• 1440px+: Màn hình lớn

Nilead cho phép bạn định nghĩa breakpoint tùy chỉnh cho từng bố cục. Hãy kiểm tra Tài liệu Style hoặc hệ thống thiết kế của bạn để cấu hình.

Lưu ý: Hầu hết các trình duyệt di động thường báo sai về chiều rộng viewport. Các website không responsive sẽ hiển thị không tốt trên viewport hẹp, nên trình duyệt di động thường hiển thị trang web với viewport rộng hơn thực tế (thông thường là 960 pixel) rồi thu nhỏ kết quả để vừa với màn hình thiết bị.

Thêm thẻ meta này để chuyển tỉ lệ chính xác trên di động:

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

⚠️ Lưu ý: Nhiều trình duyệt di động sẽ báo sai về chiều rộng màn hình trừ khi viewport được thiết lập, khiến các trang không responsive hiển thị bị lỗi.

Lưu ý: Với Nilead, bạn có thể tự định nghĩa breakpoint cho từng bố cục khác nhau. Hãy xem Tài liệu Style để biết cách thiết lập breakpoint riêng của bạn.

Hình ảnh Responsive

Hình ảnh lớn có thể làm chậm trang web. Hãy sử dụng hình ảnh responsive để chỉ tải những gì cần thiết:

Sử dụng srcset với w descriptor:

<img alt="A baby smiling" srcset=" baby-s.jpg 300w, baby-m.jpg 600w, baby-l.jpg 1200w " sizes="(max-width: 600px) 100vw, 600px" >

Sử dụng x descriptor cho độ phân giải màn hình:

<img src="baby-lowres.jpg" srcset="baby-highres.jpg 2x" alt="A baby smiling" >

Cách này giúp tải phiên bản chất lượng cao hơn trên màn hình retina hoặc thiết bị DPI cao.

💡 Mẹo chuyên nghiệp: Mặc định sử dụng hình ảnh phân giải thấp (src) và để trình duyệt tự chọn hình chất lượng cao hơn khi cần thiết.

Sử dụng srcset

<img 
  alt="Em bé cười đội băng đô vàng."
  srcset="
    baby-s.jpg  300w,
    baby-m.jpg  600w,
    baby-l.jpg  1200w,
    baby-xl.jpg 2000w
  "
  sizes="70vmin"
>

Chúng tôi cung cấp nhiều phiên bản của cùng một hình ảnh và sử dụng các w descriptor trong srcset để chỉ định chiều rộng (ví dụ, baby-s.jpg là 300w). Để giúp trình duyệt chọn hình tốt nhất, chúng tôi kết hợp srcset với thuộc tính sizes, nhằm cho biết hình sẽ chiếm bao nhiêu không gian trên trang.

Bạn cũng có thể sử dụng X descriptor:

<img 
  alt="Em bé cười đội băng đô vàng."
  src="baby-lowres.jpg"
  srcset="baby-highres.jpg 2x"
>

Chúng tôi thiết lập src mặc định là phiên bản ảnh phân giải thấp (1×) để tải nhanh hơn. Ngoài ra còn có phiên bản 2×. Trên các thiết bị màn hình mật độ điểm ảnh cao, trình duyệt sẽ tự động sử dụng hình ảnh chất lượng cao hơn.

FAQs

1. Tôi có thể định nghĩa các điểm ngắt (breakpoints) khác nhau cho từng bố cục trên Nilead không?
Có. Mỗi bố cục có thể có bộ breakpoint riêng. Hãy cấu hình trong phần Cài đặt Giao diện (Style config).

2. Nilead có tự động hỗ trợ ảnh đáp ứng (responsive) không?
Bạn cần tự thiết lập srcset hoặc sử dụng các công cụ trong Media Manager để định nghĩa các phiên bản ảnh.

3. Tôi có cần viết media queries trong code không?
Không phải lúc nào cũng cần. Trình chỉnh sửa trực quan (Visual Editor) hỗ trợ chuyển đổi chế độ đáp ứng và bạn vẫn có thể dùng @media trong custom styles để kiểm soát chi tiết hơn.

4. Tôi có thể kiểm tra breakpoint mà không cần xuất bản website không?
Có. Sử dụng Chế độ xem thử (Preview Mode) của Nilead và chuyển đổi giữa các độ rộng thiết bị để kiểm tra khả năng đáp ứng.

5. Shortcuts có mặc định đáp ứng không?
Shortcuts sẽ kế thừa style và có thể được làm cho đáp ứng qua Visual Editor như bất kỳ widget nào khác.