W3Schools教學系列

W3Schools是知名的網(wǎng)頁設(shè)計／前端開發(fā)教學網(wǎng)站，不僅提供HTML、CSS、JavaScript等的詳盡教學，還可以把它當作說明文件（Documents）。有經(jīng)驗的前端或多或少已經(jīng)接觸過這個網(wǎng)站，因為它經(jīng)常出現(xiàn)在搜索結(jié)果的前幾項。其中，它的How To部分更是包含了大量非常實用的例子，例如，如何制作SlideShow（圖片輪播）、Lightbox、Parallax（視差效果）等等。因此我想做一系列的影片專門介紹這些How To。

視頻連結(jié)

• B站
• YouTube

響應(yīng)式網(wǎng)頁布局

今天已經(jīng)是2019年，基本上所有新建的網(wǎng)頁都會是響應(yīng)式(Responsive)，以適應(yīng)在手機顯示。而實現(xiàn)響應(yīng)式網(wǎng)頁布局主要有3種方法：

Float

Flexbox

CSS Grid

當然，以上三者都需要搭配Media Query使用。

其中CSS Grid是最新，也是我最推崇的，但由于太新，較舊的瀏覽器并不支持。不過，大部分的瀏覽器其實都已經(jīng)支持了，我個人不會太擔心。要想知道哪些瀏覽器支持CSS Grid（或其他新功能），可以前往Can I Use查詢。CSS Grid完全就是為了網(wǎng)頁布局及其他二維（橫向加縱向）布局而設(shè)計的，相信未來的網(wǎng)頁都會采用這一設(shè)計。

Flexbox也算新，但瀏覽器支持的情況比CSS Grid要好點。基本上，目前主流已經(jīng)轉(zhuǎn)向Flexbox，Bootstrap就是很好的例子。但其實，Flexbox是為一維布局設(shè)計的（橫向或縱向），而網(wǎng)頁布局往往是二維的，Flexbox并非最佳選擇，但由于CSS Grid來得太遲，Flexbox又能完成任務(wù)，現(xiàn)在不少新的網(wǎng)頁以及前端框架采用Flexbox。

Float原來是設(shè)計來處慮理文繞圖之類的問題，后來被用于布局設(shè)計。Float布局有著各種各樣的問題，已經(jīng)在逐漸淘汰中，但由于過去應(yīng)用太普遍，相信短時間內(nèi)并不會消失，因此也有必要瞭解。

這三種設(shè)計，W3Schools都有介紹。我會分成三篇來講，今天先從最古老的Float開始。

Float網(wǎng)頁布局

Float布局的重點是

讓元素靠向同一個方向（左或右）

用百分比控制每一個元素的寬度

透過Media Query改變元素寬度以適應(yīng)不同屏幕尺寸

W3Schools的例子

這個例子的重點有兩處，一是設(shè)定左右兩柵都向左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設(shè)定當屏幕尺寸小于800px時，讓左右兩柵的寬度都變成100%，以實現(xiàn)響應(yīng)式設(shè)計（Responsive Design）：

@media screen and (max-width: 800px) {.leftcolumn, .rightcolumn { width: 100%;padding: 0;} }

或許你會注意到導航欄（.topnav）也進行了類似的處理，由于原理一樣，就不多說了。

改進：移動優(yōu)先原則（Mobile First）

之前介紹過移動優(yōu)先原則，即先設(shè)計小屏幕版，再透過Media Query設(shè)定桌面版。W3Schools的這個例子并沒有采取這一原則，我們可以自行修改，使之符合。方法很簡單，只要將Median Query里的內(nèi)容和外面相應(yīng)的內(nèi)容反過來即可，不要忘了把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，另外，我發(fā)現(xiàn)原本例子采用的400px作為斷點，換成min-width之后沒有反應(yīng)，需要改為500px。具體原因，我也不太確定，如果你知道的話，歡迎告知。

我開了一個GitHub的倉庫專門放W3Schools系列的代碼，要查看Mobile First版的代碼請移步：W3Schools GitHub

總結(jié)

以上是生活随笔為你收集整理的响应式网页布局 - W3Schools How-Tos 01的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。