Starter · code-edit

srcset 與 sizes

先看見缺口,再完成一個小修改。

Starter 要做什麼

先看見缺口,再完成一個小修改。

本主題檔案:files/index.html

定位:先看 CSS layout 的真實 slot width,再檢查 sizes 是否描述相同規則。

本階段驗收

頁面不會替你修改檔案;請在實作檔完成後重新整理確認。

目前要處理

img 有兩個 width descriptor candidates,sizes 暫為 100vw。

預期看到

runtime 的 sizes attribute 真正更新;完整 image probe 在不同 viewport 回報 currentSrc、naturalWidth 與選中候選。

<img src="service-640.svg" srcset="service-320.svg 320w, service-640.svg 640w" sizes="(max-width:480px) 100vw, 50vw" alt="到府服務人員整理空間">

檔案清單

只在本階段資料夾內操作,避免改到其他章節。

證據:現有 runtime before=100vw、after=(max-width:480px) 100vw, 50vw、attribute=sizes;完整證據需 currentSrc/naturalWidth/candidateByWidth

前往 Checkpoint →