響應式網頁佈局 - 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