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

Katie Hempenius
Katie Hempenius
X

Thử bản minh hoạ này

  • Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào 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">

Điều gì đang xảy ra?

Giá trị của thuộc tính sizes cho biết chiều rộng hiển thị hình ảnh sẽ là: "100% chiều rộng khung nhìn" trên khung nhìn có chiều rộng tối đa 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.

Việc chỉ định chiều rộng nhiều vùng 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 nhiều kích thước khung nhìn.

Cách chỉ định nhiều chiều rộng khe

  • 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 của khung. 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 khe.
  • Mục cuối cùng trong danh sách này là chiều rộng vùng 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 khung hình 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 khe 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)