課程簡(jiǎn)介

1. 本課程的由來(lái)

這些年，隨著IT和互聯(lián)網(wǎng)產(chǎn)業(yè)的逐漸成熟，對(duì)于開發(fā)者的技術(shù)要求越來(lái)越高，求職競(jìng)爭(zhēng)也不斷加劇。

我們隨便打開一個(gè)招聘軟件就可以看到Web前端有相當(dāng)一部分崗位不僅僅要求你只會(huì)做 PC 端，而且還要你會(huì)移動(dòng)端、微信小程序、至少一門后臺(tái)語(yǔ)言、RESTful、GraphQL、webpack、websocket等各種各樣五花八門的技術(shù)。也難怪經(jīng)常有人調(diào)侃自己學(xué)不動(dòng)了…

但無(wú)論這些技術(shù)再怎么百花齊放，前端終歸還是要寫頁(yè)面的。畢竟在當(dāng)年還沒(méi)有前端這個(gè)崗位的時(shí)候，就是程序員寫完后臺(tái)再用 jQuery 寫一下頁(yè)面，只不過(guò)后來(lái)技術(shù)越來(lái)越多，人的精力終究是有限的，所以單獨(dú)又細(xì)分出來(lái)了一個(gè)領(lǐng)域。

不過(guò)沒(méi)想到的是這個(gè)領(lǐng)域在近些年發(fā)展的竟如此繁華。平地高樓萬(wàn)丈起，就算再繁華的大廈也是要先從打地基開始的，頁(yè)面上那些看得見摸得著的畫面就是前端的地基！

于是就有了這門《移動(dòng)端布局》，其實(shí)一開始是并沒(méi)有這門課的，有的只是《CSS布局》這門課。但在為課程制作大綱時(shí)，我為了盡可能的全面，寫了一份內(nèi)容超長(zhǎng)的大綱。慕課網(wǎng)的內(nèi)容負(fù)責(zé)人覺(jué)得內(nèi)容實(shí)在是太多了，可能會(huì)導(dǎo)致大家看了目錄就直接從入門到放棄了。

在砍掉一部分內(nèi)容后再把課程進(jìn)行拆分，于是乎《移動(dòng)端布局》誕生啦！

由于移動(dòng)互聯(lián)網(wǎng)時(shí)代的到來(lái)，手機(jī)端的使用頻率居然比電腦還要高。

2. 前端的基礎(chǔ)

不管這個(gè)網(wǎng)站的頁(yè)面背后有著多么復(fù)雜的交互邏輯、多龐大的用戶量、多么海量的數(shù)據(jù)、多么高的并發(fā)…
首先你得有個(gè)頁(yè)面吧！不能讓用戶一訪問(wèn)網(wǎng)站直接給人家看數(shù)據(jù)庫(kù)吧！

有人的地方就有江湖 有頁(yè)面的地方就有布局

布局可不僅僅只是把數(shù)據(jù)整齊的羅列在頁(yè)面上這么簡(jiǎn)單，一個(gè)合適的布局可以令用戶的操作非常順暢。同時(shí)在不同的場(chǎng)景下也應(yīng)選擇不同的布局，如果選錯(cuò)布局的話很可能會(huì)導(dǎo)致用戶對(duì)頁(yè)面的操作不絲滑，哪怕最初呈現(xiàn)出來(lái)的數(shù)據(jù)都是一樣的。

3. 前端的優(yōu)勢(shì)

網(wǎng)頁(yè)有一個(gè)最優(yōu)秀的特點(diǎn)就是它的跨平臺(tái)性，一個(gè)前端程序員寫出的頁(yè)面，既可以運(yùn)行在 Windows 的瀏覽器上、也可以運(yùn)行在 MacOS 的瀏覽器上、還可以運(yùn)行在 IOS 和安卓瀏覽器上。正是由于網(wǎng)頁(yè)所具備的優(yōu)異跨平臺(tái)性擴(kuò)展出了套殼網(wǎng)頁(yè)的這種形式，比如看起來(lái)只是個(gè) apk 的安卓程序，點(diǎn)擊也能安裝到手機(jī)中，但實(shí)際上里面的內(nèi)容都是網(wǎng)頁(yè)…

還有現(xiàn)在紅極一時(shí)的小程序，其實(shí)在很早以前小程序就已經(jīng)火起來(lái)了，但這次疫情真的是把小程序徹底推向了一個(gè)巔峰：去商場(chǎng)要掃小程序二維碼、坐高鐵要掃小程序二維碼、去麥當(dāng)勞要用小程序點(diǎn)餐、去景點(diǎn)參觀要用小程序預(yù)約、去看電影要用小程序訂票…

那么小程序其實(shí)是和前端技術(shù)是分不開的，雖然騰訊覺(jué)得自己搞的東西不能叫HTML、CSS，取而代之的是 WX(微信)ML、WX(微信)SS… 但其實(shí)還是換湯不換藥，語(yǔ)法什么的都基本一致，好多東西甚至連名稱都沒(méi)改。

而且我們現(xiàn)在做小程序也有那種多端小程序框架：uni-app、mpvue、taro等…
這里用的都是 CSS 而不是 微信SS 。

所以學(xué)會(huì)了移動(dòng)端布局，不僅僅可以把學(xué)到的知識(shí)運(yùn)用到移動(dòng)端的網(wǎng)頁(yè)上、還可以用到 React Native、小程序、快應(yīng)用、Weex等這些前端演變出來(lái)的技術(shù)上。

4. 本課程的設(shè)計(jì)思路

首先我們會(huì)用最被廣泛使用同時(shí)還特別簡(jiǎn)單的一種布局(居中布局)來(lái)作為開篇第一個(gè)布局進(jìn)行切入，由淺入深，用各種各樣五花八門的 CSS 技術(shù)來(lái)實(shí)現(xiàn)同一種布局，以豐富大家的視角。

同時(shí)我們的布局也是各式各樣，基本把最常見的幾種布局方式都羅列了出來(lái)：

• 居中布局
• 單列布局
• 雙列布局
• 呂形布局
• 上下欄布局
• 九宮格布局
• 響應(yīng)式布局

尤其是最后這兩種布局，用肉眼看可能沒(méi)啥，但實(shí)際用代碼實(shí)現(xiàn)還是較為復(fù)雜的，不過(guò)也有簡(jiǎn)便方式，在每門課(除了單列布局)的第一小節(jié)，我們都會(huì)使用一個(gè)非常利于我們學(xué)習(xí)和記憶的 CSS 庫(kù)：chinese-layout ，這個(gè) CSS 庫(kù)的神奇之處就在于可以使用一部分中文關(guān)鍵字，原理其實(shí)就是 CSS變量 ，用它很輕松的就可以實(shí)現(xiàn)出一個(gè)布局。

用它我們就可以兩行代碼實(shí)現(xiàn)一個(gè)布局，當(dāng)然，不僅要學(xué)會(huì)庫(kù)的使用，還要學(xué)會(huì)經(jīng)典 CSS 技術(shù)的運(yùn)用：

• 左浮動(dòng)
• 自動(dòng)外邊距
• 絕對(duì)定位
• 固定定位

這些技術(shù)兼容性都非常的好，但在下一章我們就會(huì)講一下移動(dòng)端瀏覽器的兼容性為什么比 PC 端的好一些，在這種廣泛支持 CSS3 的大背景下，我們還要學(xué)習(xí)新技術(shù)的運(yùn)用：

• 多列屬性
• 行內(nèi)塊元素
• 表格布局
• 彈性布局
• 網(wǎng)格布局
• 媒體查詢

5. 前置知識(shí)

本門課程雖然為初學(xué)者課程，但并不代表你已經(jīng)工作了這門課就不適合你了。假如屏幕前的你在工作過(guò)程中寫的頁(yè)面多數(shù)是顯示在 PC 端的，但對(duì)移動(dòng)端了解較少，這門課還是值得去深入學(xué)習(xí)的。

另一方面即使你的工作過(guò)程中也寫了很多移動(dòng)端的網(wǎng)站，你也可以來(lái)看一看你有沒(méi)有全部掌握課程中的各種布局的所有實(shí)現(xiàn)方式。因?yàn)榧幢闶峭环N布局，也會(huì)有各種各樣的不同方式可以實(shí)現(xiàn)，加深一下印象，下次跳槽面試的時(shí)候就不怕面試官的各種刁難了。

同時(shí)，如果屏幕前的你什么也不會(huì)，只知道想入門前端需要學(xué) HTML + CSS + JS ，那么這門課大概率你是看不懂的，多少還是需要對(duì) HTML 和 CSS 有一定的了解才行。

6. 結(jié)語(yǔ)

小白同學(xué)不要被我上面那段話嚇到哈，本門課程從技術(shù)角度來(lái)講并不難，難的只是思路較多，從這個(gè)思路出發(fā)可以實(shí)現(xiàn)這種布局、換個(gè)思路依然可以實(shí)現(xiàn)這種布局，有利于開闊大家的視野和思路。

而且像我說(shuō)的，很少有前端只做 PC 頁(yè)面而不碰移動(dòng)端的了，因?yàn)橐苿?dòng)端互聯(lián)網(wǎng)本身就已經(jīng)趕超 PC 上網(wǎng)了，同時(shí)又不僅僅是瀏覽網(wǎng)頁(yè)這么簡(jiǎn)單，就想想你掃的那堆健康碼小程序是不是前端做出來(lái)的吧。

既然《移動(dòng)端布局》的用途這么廣泛，那還等什么呢？趕緊上車，一起去開起布局世界的大門吧！