課程簡介

1. 本課程的由來

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

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

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

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

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

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

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

2. 前端的基礎(chǔ)

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

有人的地方就有江湖 有頁面的地方就有布局

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

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

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

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

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

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

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

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

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

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

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

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

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

• 左浮動
• 自動外邊距
• 絕對定位
• 固定定位

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

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

5. 前置知識

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

另一方面即使你的工作過程中也寫了很多移動端的網(wǎng)站，你也可以來看一看你有沒有全部掌握課程中的各種布局的所有實現(xiàn)方式。因為即便是同一種布局，也會有各種各樣的不同方式可以實現(xiàn)，加深一下印象，下次跳槽面試的時候就不怕面試官的各種刁難了。

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

6. 結(jié)語

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

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

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