響應式網頁佈局 - W3Schools教學01
W3Schools教學系列
W3Schools 是知名的網頁設計／前端開發教學網站，不僅提供HTML、CSS、JavaScript等的詳盡教學，還可以把它當作說明檔案（Documents）。有經驗的前端或多或少已經接觸過這個網站，因為它經常出現在搜尋結果的前幾項。其中，它的 How To 部分更是包含了大量非常實用的例子，例如，如何製作SlideShow（圖片輪播）、Lightbox、Parallax（視差效果）等等。因此我想做一系列的影片專門介紹這些How To。
響應式網頁佈局
今天已經是2019年，基本上所有新建的網頁都會是響應式(Responsive)，以適應在手機顯示。而實現響應式網頁佈局主要有3種方法：
- Float
- Flexbox
- CSS Grid
當然，以上三者都需要搭配Media Query使用。
其中CSS Grid是最新，也是我最推崇的，但由於太新，較舊的瀏覽器並不支援。不過，大部分的瀏覽器其實都已經支援了，我個人不會太擔心。要想知道哪些瀏覽器支援CSS Grid（或其他新功能），可以前往 Can I Use 查詢。CSS Grid完全就是為了網頁佈局及其他二維（橫向加縱向）佈局而設計的，相信未來的網頁都會採用這一設計。
Flexbox也算新，但瀏覽器支援的情況比CSS Grid要好點。基本上，目前主流已經轉向Flexbox，Bootstrap就是很好的例子。但其實，Flexbox是為一維佈局設計的（橫向或縱向），而網頁佈局往往是二維的，Flexbox並非最佳選擇，但由於CSS Grid來得太遲，Flexbox又能完成任務，現在不少新的網頁以及前端框架採用Flexbox。
Float原來是設計來處慮理文繞圖之類的問題，後來被用於佈局設計。Float佈局有著各種各樣的問題，已經在逐漸淘汰中，但由於過去應用太普遍，相信短時間內並不會消失，因此也有必要瞭解。
這三種設計，W3Schools都有介紹。我會分成三篇來講，今天先從最古老的Float開始。
Float網頁佈局
Float佈局的重點是
- 讓元素靠向同一個方向（左或右）
- 用百分比控制每一個元素的寬度
- 透過Media Query改變元素寬度以適應不同螢幕尺寸
這個例子的重點有兩處，一是設定左右兩柵都向左float，寬度分別為75%和25%：
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
二是Media Query設定當螢幕尺寸小於800px時，讓左右兩柵的寬度都變成100%，以實現響應式設計（Responsive Design）：
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
或許你會注意到導航欄（.topnav）也進行了類似的處理，由於原理一樣，就不多說了。
改進：移動優先原則（Mobile First）
之前介紹過移動優先原則，即先設計小螢幕版，再透過Media Query設定桌面版。W3Schools的這個例子並沒有採取這一原則，我們可以自行修改，使之符合。方法很簡單，只要將Median Query裡的內容和外面相應的內容反過來即可，不要忘了把Media Query從max-width改為min-width。
/* Left column */
.leftcolumn {
float: left;
width: 100%;
}
/* Right column */
.rightcolumn {
float: left;
width: 100%;
background-color: #f1f1f1;
padding: 0;
}
@media screen and (min-width: 800px) {
.leftcolumn {
width: 75%;
}
.rightcolumn {
width: 25%;
padding-left: 20px;
}
}
你可以試著自行將.topnav也修改一下，要注意，width如果沒有特別指定便是auto，另外，我發現原本例子採用的400px作為斷點，換成min-width之後沒有反應，需要改為500px。具體原因，我也不太確定，如果你知道的話，歡迎告知。
我開了一個GitHub的倉庫專門放W3Schools系列的程式碼，要檢視Mobile First版的程式碼請移步： W3Schools GitHub