晚安大家好，歡迎來到coding小白盜版學校官網的第四天～這個計畫的內容是我這個coding超新手會在這30天裡，把複刻學校官網當作目標，從最基礎的前端html、css、js...開始邊做邊學，紀錄每天的學習進度，看看一個月過去能學到什麼程度。

昨天遇到了讓人想破頭的問題：為什麼按照 figma 尺寸用 css 寫出來的畫面總是感覺發福大了一圈...？睡了一覺還是沒想出個所以然，於是我選擇暫時把網頁調成90%自欺欺人的先繼續進度，畢竟...

圖片長寬不聽話

在nav和banner之後接著就要進入到網頁的主體article了，由上到下，我將它再劃分為四個section：校園新聞與影中有你、訊息公告、外部連結清單、社群帳號連結。

沒想到剛開始又遇到挑戰了，明明已經設定了高與寬，為甚麼校園新聞的圖片兩張還是不同寬呢？

百思不得其解，於是我把程式碼貼給Chatgpt

html

<div class="news-box02">
  <img class="img05" src="img\news_01.png" alt="新聞校長">
  <div class="news-box01">
  <p class="font05">2023-09-18</p>
  <p class="font04">本校創新轉型發展有成，獲風傳媒兩則專訪報導</p>
</div>
<div class="news-box02">
  <img class="img05" src="img\news_02.png" alt="新聞芝山">
  <div class="news-box01">
  <p class="font05">2023-09-09</p>
  <p class="font04">國北教大芝山親善大使團「智慧啟航‧夢想起飛」社團博覽會魅力登場</p>
</div>

css

.img05{/*校園新聞照片*/
    width: 306px;
    height: 170px;
    object-fit: cover;
}
.news-box01{
    width: 468px;
    height: 170px;
    border: 1px solid #D2CEC7;
    padding: 28px 26px;
}
.news-box02{
    display: flex;
}

chatgpt 告訴我可能是「父容器 flex」的影響

.news-box02 { display: flex; } → 會影響子元素的尺寸分配。
如果 .news-box01 空間太小，flex 會嘗試壓縮 .img05。
👉 建議在.img05裡加上：flex-shrink: 0

秉持著好學的心，我又問他： flex-shrink 是什麼？

在 flex 容器（display: flex;）裡，子元素如果空間不夠，瀏覽器會自動「壓縮」它們，避免超出父容器。而flex-shrink 就是控制元素是否允許被壓縮。

📐 語法
flex-shrink: 數字;

預設值是 1 → 允許壓縮。
設成 0 → 完全不壓縮，保持原本的寬高。
如果是大於 1 的數字，代表壓縮比例比別人更大。

原來如此，加上這一行果然藥到病除，謝謝chatgpt學長～(´▽`ʃ♡ƪ)"

恍然大悟

接著也順順的完成了影中有你和資訊公告，就在這時候突然靈光一閃--ㄟ我記得我的的筆電螢幕顯示比例是150%--難道就是因為這樣影響了字體大小嗎？！

為了確認我把這個假設問了chatgpt，

我發現我寫的網頁都會比在figma做的設計稿大，色塊超出螢幕、文字因為太大被摺疊換行，有沒有可能是因為我把筆電螢幕顯示比例調成了150%

結果得到了肯定的回答

嗯嗯～你觀察得很仔細 👍
「筆電螢幕顯示比例調成 150%」的確會影響到你肉眼看到的大小，但它不會影響瀏覽器實際渲染的 CSS 單位（px、% 都還是一樣的）也就是說：
Figma 設計稿 → 一般會用 1440px、1920px 這種螢幕解析度當基準。
你的電腦 → 把螢幕縮放到 150%，所以「1 CSS px」在視覺上看起來比較大。
結果就是：在 Figma 裡覺得剛好的字體、色塊，實際切到網頁上時，看起來就「超大」，甚至超出螢幕。
🔑 可能原因
沒有設定響應式單位
你在 CSS 用固定 px（例如 font-size: 24px、width: 1200px），當螢幕比較窄就會超出。
沒有設定 viewport
你的 HTML 裡應該要加這行，不然手機 / 縮放時都會怪怪的：

Figma 與瀏覽器顯示基準不同
Figma 預設是「1px = 螢幕的實際 1px」，但瀏覽器會考慮縮放和 DPR（device pixel ratio），所以看起來會有落差。
✅ 建議解法

1. 字體、間距用 rem 或 %，不要全部用 px。
   html { font-size: 16px; } /* 基準 /
   p { font-size: 1rem; } / = 16px /
   h1 { font-size: 2rem; } / = 32px */
   色塊、版面用百分比或 max-width

2. 先測試不同螢幕大小（Chrome → F12 → 切換裝置尺寸），看是否還是會超出。

👉 你的狀況很有可能是因為「用 px 固定死」+「螢幕縮放 150%」，才會覺得整個版面比 Figma 大。

瞬間謎底揭曉！還在無意間獲得新任務--響應式設計，但我還是決定先把剩下的半頁完成，之後再來研究一起調整。

今天也算是有收穫的一天了，理直氣壯收工嘍，各位明天見～