接續上一篇#從零開始15：怎麼設定照片大小，這篇要討論@media(max-width)和@media(min-width)。

在網頁設計中，響應式網頁設計（Responsive Web Design，簡稱RWD）的目標是使網站在各種不同大小和類型的設備上都能夠正確顯示和良好運作，無論是在桌機、平板還是手機上。而實現RWD的其中一個方法是使用media query。

@media(max-width)和@media(min-width)

我們可以設定@media(max-width)來指定當螢幕寬度小於某個值時應用的樣式，而@media(min-width)則用於當螢幕寬度大於某個值時應用的樣式。這使我們能夠針對不同大小的設備優化網頁佈局和設計。

可以參考程式碼或者看範例codepen：https://codepen.io/rochelwang1205/pen/XWoYYxO

//mobile first
<div class="mobile-first">min-width</div>
//css
.mobile-first {
  background-color: lightblue; /* 在小螢幕上使用淺藍色背景 */
  @media (min-width: 768px) {
    background-color: lightgreen; /* 在螢幕寬度大於等於768px時，使用淺綠色背景 */
  }
  @media (min-width: 1024px) {
    background-color: lightcoral; /* 在螢幕寬度大於等於1024px時，使用淺珊瑚色背景 */
  }
}


//desktop first
<div class="desktop-first">max-width</div>
//css
.desktop-first{
  background-color: blue; /* 在桌面上使用淺珊瑚色背景 */
@media (max-width: 1023px) {
    background-color: coral; /* 在螢幕寬度小於1024px時，使用淺綠色背景 */
}
@media (max-width: 767px) {
    background-color: green; /* 在螢幕寬度小於768px時，使用淺藍色背景 */
}
}

mobile first or desktop first?

在設計響應式網頁時，我們會考慮是Mobile First還是Desktop First。Mobile First主要關注考量的對象是行動用戶，會首先設計和優化網站的行動版本，然後再逐漸添加更大屏幕上的設計元素。

另一方面，Desktop First可能適用於如需要複雜功能或大量內容的網站，會先設計和優化網站的桌面版本，然後再根據需要進行調整，以適應較小的螢幕。

💡分享：實際在刻網頁的時候，一次先把桌面板(或手機板)刻完再處理RWD，說真的還挺麻煩的。如果完成一部分並處理RWD最後再組起來，會比較好劃分安排目標，感覺也比較有成就感XD

參考資料：

1. CSS media query：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries