跟著步驟操作,實際結果自己確認。

返回剛才的步驟

主標變小:查出覆蓋來源

正常網站保留。把本關故障包中的portfolio另放student-work/fault-L05/portfolio,用Cursor與瀏覽器開啟同一份副本。

1. 先重現,不急著改

  1. 在桌面(例如1440px)選首頁主標,預期48px,實際故障為20px。
  2. 在窄版(例如390px)再看,預期32px,實際仍20px。
  3. 在Styles/Computed記錄字級、生效選擇器、檔案與行號;確認不是只看另一個頁面的h1。

只在同等條件下比較相同選擇器的先後;不同選擇器還涉及作用範圍與優先程度。這個練習刻意使用相同選擇器的較後規則,原因可單獨重現。

2. 使用當關檢查修正Prompt

附上故障副本的三頁HTML、完整CSS、實際寬度、預期與實際字級、來源證據。在Cursor內建AI對話核對路徑後貼Prompt,先要求說明原因與最小修正。

不要加!important壓過問題,不重寫整份CSS,不把正常完成版覆蓋進來。修正只處理造成故障的一個規則區塊。

3. 自己驗證

  • 桌面首頁主標48px,窄版32px,行高1.2。
  • 首頁主視覺上下內距32px;服務卡片32px、服務標題24px,作品卡片仍24px。
  • 三頁導覽、圖片、APPA、主要入口正常。
  • 比較前後檔案,沒有其他文案、色票、媒體查詢或尺寸被改掉。

寫下故障規則、生效原因、改了什麼、如何重驗。沒有實際看過的寬度與裝置保持待測,正常來源不受影響。

返回剛才的步驟