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 bằng các kích thước trình duyệt khác nhau. Hãy lưu ý sự khác biệt của các hình ảnh: chúng không chỉ khác nhau về kích thước mà còn có tỷ lệ cắt và tỷ lệ khung hình khác nhau.
Điều gì đang xảy ra ở đây?
Hướng nghệ thuật hiển thị các hình ảnh khác nhau trên nhiều kích thước màn hình.
Hình ảnh thích ứng tải nhiều kích thước của cùng một hình ảnh. Hướng nghệ thuật đưa việc này tiến thêm một bước 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 định hướng nghệ thuật để cải thiện cách trình bày trực quan. Ví dụ: các lần cắt hình ảnh khác nhau trong bản minh hoạ này đảm bảo rằng địa điểm yêu thích (hoa) luôn hiển thị chi tiết, bất kể màn hình là gì. Lợi ích của tính năng chỉ dẫn nghệ thuật hoàn toàn mang tính thẩm mỹ chứ 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ã chỉ đường nghệ thuật cho bản minh hoạ này.
Cách đoạn mã hoạt động
Chỉ hướng nghệ thuật sử dụng các thẻ <picture>, <source> và <img>.
hình ảnh
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 đa phương tiện.
Trình duyệt sử dụng thẻ <source> đầu tiên có truy vấn nội dung nghe nhìn trả về giá trị true. Nếu không có truy vấn nội dung nghe nhìn nào khớp, 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 hỗ trợ thẻ <picture>.
Nếu trình duyệt không hỗ trợ thẻ <picture>, trình duyệt đó sẽ tải hình ảnh do thẻ <img> chỉ định.