Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó nhấn
Toàn màn hình.
Tải lại ứng dụng bằng nhiều kích thước trình duyệt. Chú ý đến sự khác biệt của các hình ảnh
là: chúng không chỉ có kích thước khác nhau mà còn có cách cắt xén khác nhau và
tỷ lệ khung hình.
Điều gì đang xảy ra ở đây?
Chỉ dẫn nghệ thuật
hiển thị các hình ảnh khác nhau trên các kích thước màn hình khác nhau.
Hình ảnh thích ứng sẽ tải nhiều kích thước của cùng một hình ảnh. Chỉ đạo nghệ thuật
và tải các hình ảnh hoàn toàn khác nhau tuỳ thuộc vào
màn hình.
Sử dụng hướng nghệ thuật để cải thiện cách trình bày hình ảnh. Ví dụ: các lựa chọn khác nhau
việc cắt xén hình ảnh trong bản minh hoạ này đảm bảo rằng địa điểm yêu thích (hoa)
luôn được hiển thị chi tiết, bất kể màn hình. Các lợi ích của chỉ dẫn nghệ thuật là
thuần tuý về tính thẩm mỹ; nên nó không mang lại lợi ích về hiệu suất so với hình ảnh thích ứng.
Xem mã
Xem index.html để biết mã hướng dẫn nghệ thuật cho bản minh hoạ này.
Thẻ <picture> cung cấp một trình bao bọc cho 0 hoặc nhiều thẻ <source> và một thẻ <image>.
nguồn
Thẻ <source> chỉ định một tài nguyên nội dung nghe nhìn.
Trình duyệt sử dụng thẻ <source> đầu tiên với một truy vấn nội dung nghe nhìn
trả về giá trị true. Nếu không có truy vấn phương tiện nào phù hợp, thì
trình duyệt sẽ quay lại tải hình ảnh do <img> chỉ định.
.
img
Thẻ <img> giúp mã này hoạt động trên các trình duyệt không
có hỗ trợ thẻ <picture>.
Nếu trình duyệt không hỗ trợ thẻ <picture>, thì trình duyệt sẽ tải
hình ảnh do thẻ <img> chỉ định.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2018-11-05 UTC."],[],[]]