Chỉ định nhiều chiều rộng vùng

Katie Hempenius
Katie Hempenius
X

Dùng thử bản minh hoạ này

  • Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng). Sau đó, nhấn vào biểu tượng Fullscreen (Toàn màn hình) toàn màn hình.

  • Tải lại ứng dụng trong các cửa sổ trình duyệt có kích thước khác nhau để xem trình duyệt tải các hình ảnh khác nhau và sử dụng các bố cục khác nhau ở các kích thước trình duyệt khác nhau.

Xem mã

  • Hãy xem index.html để biết mã giúp thực hiện việc này:
<img src="flower.jpg"
  srcset="flower-small.jpg 480w, flower-large.jpg 800w"
  sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">

Chuyện gì đang xảy ra vậy?

Giá trị của thuộc tính sizes cho biết chiều rộng hiển thị của hình ảnh sẽ là: "100% chiều rộng khung nhìn" trên khung nhìn rộng đến 480px, "50% chiều rộng khung nhìn" trên màn hình rộng 481–1024px và 800px trên màn hình rộng hơn 1024px. Các chiều rộng này khớp với chiều rộng được chỉ định trong CSS.

Khả năng chỉ định nhiều chiều rộng vùng quảng cáo phù hợp với bố cục trang sử dụng kiểu khác nhau (tức là chiều rộng hình ảnh) cho các kích thước khung nhìn khác nhau.

Cách chỉ định nhiều chiều rộng vùng quảng cáo

  • Sử dụng danh sách được phân tách bằng dấu phẩy để chỉ định nhiều chiều rộng vùng quảng cáo. Mỗi mục trong danh sách, ngoại trừ mục cuối cùng, bao gồm một điều kiện nội dung nghe nhìn (ví dụ: max-width hoặc min-width) và chiều rộng vùng quảng cáo.
  • Mục cuối cùng trong danh sách này là chiều rộng vùng quảng cáo mặc định. Đây là chế độ mặc định, vì vậy, bạn không cần chỉ định điều kiện nội dung nghe nhìn.
  • Bạn có thể liệt kê bao nhiêu chiều rộng vùng quảng cáo tuỳ thích – số lượng hình ảnh được liệt kê trong srcset không quan trọng.

  • Bạn có thể chỉ định chiều rộng của vùng bằng nhiều đơn vị. Sau đây là tất cả chiều rộng hợp lệ:

  • 100px

  • 33vw

  • 20em

  • calc(50vw-10px)

Chiều rộng sau đây không hợp lệ:

  • 25% (không thể sử dụng tỷ lệ phần trăm với thuộc tính kích thước)