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

Katie Hempenius

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 Fullscreen (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ã

• Thanh toán index.html để tìm mã giúp xác minh:

<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 ở đây?

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 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.

Khả năng 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 các kích thước khung nhìn khác nhau.

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

• 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. 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 về nội dung đa phương tiện (ví dụ: max-width hoặc min-width) và chiều rộng vùng.
• Mục cuối cùng trong danh sách này là chiều rộng vùng mặc định. Đây là tuỳ chọn mặc định, vì vậy, bạn không cần chỉ định điều kiện nội dung đa phương tiện.
• Bạn có thể liệt kê bao nhiêu chiều rộng vùng 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 vị trí bằng nhiều đơn vị khác nhau. Sau đây là tất cả các chiều rộng hợp lệ:

• 100px

• 33vw

• 20em

• calc(50vw-10px)

Chiều rộng sau đây không phải là chiều rộ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)