Thiết kế đáp ứng

Tính năng web: Truy vấn vùng chứa (kích thước) Đơn vị khung nhìn nhỏ, lớn và động aspect-ratio min(), max() và clamp() Đơn vị khung nhìn

Các phương pháp hay nhất áp dụng cho mọi nhóm tuổi

  • Sử dụng truy vấn @container để tạo bố cục thích ứng dựa trên thành phần, thích ứng với kích thước của vùng chứa gốc thay vì khung nhìn. Hãy xem phần Tạo kiểu theo kích thước để biết thêm thông tin chi tiết.
  • Sử dụng đơn vị khung nhìn động (dvh, dvw) thay vì vh/vw để ngăn bố cục bị hỏng khi các phần tử trên giao diện người dùng của trình duyệt di động (như thanh địa chỉ) xuất hiện hoặc biến mất.
  • Sử dụng aspect-ratio cho các phần tử đa phương tiện (như <img> và <video>) để dành không gian trong quá trình tải và ngăn chặn Mức thay đổi bố cục tích luỹ (CLS).

Để biết cơ chế bố cục đằng sau giao diện người dùng thích ứng (flexbox, lưới, đơn vị truy vấn vùng chứa, đơn vị khung nhìn), hãy xem phần Bố cục CSS và thiết kế đáp ứng.

Kiểu chữ thích ứng

  • NÊN kết hợp các đơn vị tương đối theo khung nhìn và tương đối theo phông chữ trong clamp() cho các cỡ chữ điều chỉnh theo kích thước khung nhìn, đồng thời đảm bảo các cỡ chữ này nằm trong phạm vi mong muốn. Ví dụ: clamp(2rem, 1rem + 5vw, 4rem). Điều chỉnh tỷ lệ của đơn vị tương đối theo khung nhìn và đơn vị tương đối theo phông chữ để kiểm soát tốc độ thay đổi cỡ chữ.
  • KHÔNG sử dụng riêng vw cho cỡ chữ mà không có clamp(), vì việc này có thể khiến văn bản quá nhỏ hoặc quá lớn trên các màn hình có kích thước cực lớn hoặc cực nhỏ.

Để điều chỉnh kiểu chữ và khoảng cách theo vùng chứa thay vì khung nhìn, hãy xem phần Điều chỉnh tỷ lệ linh hoạt.