新时代 新成都--加快建设全面体现新发展理念的城市--四川频道--人民网

1. 本课程的由来

这些年，随着IT和互联网产业的逐渐成熟，对于开发者的技术要求越来越高，求职竞争也不断加剧。

我们随便打开一个招聘软件就可以看到Web前端有相当一部分岗位不仅仅要求你只会做 PC 端，而且还要你会移动端、微信小程序、至少一门后台语言、RESTful、GraphQL、webpack、websocket等各种各样五花八门的技术。也难怪经常有人调侃自己学不动了…

但无论这些技术再怎么百花齐放，前端终归还是要写页面的。毕竟在当年还没有前端这个岗位的时候，就是程序员写完后台再用 jQuery 写一下页面，只不过后来技术越来越多，人的精力终究是有限的，所以单独又细分出来了一个领域。

不过没想到的是这个领域在近些年发展的竟如此繁华。平地高楼万丈起，就算再繁华的大厦也是要先从打地基开始的，页面上那些看得见摸得着的画面就是前端的地基！

于是就有了这门《移动端布局》，其实一开始是并没有这门课的，有的只是《CSS布局》这门课。但在为课程制作大纲时，我为了尽可能的全面，写了一份内容超长的大纲。慕课网的内容负责人觉得内容实在是太多了，可能会导致大家看了目录就直接从入门到放弃了。

在砍掉一部分内容后再把课程进行拆分，于是乎《移动端布局》诞生啦！

由于移动互联网时代的到来，手机端的使用频率居然比电脑还要高。

2. 前端的基础

不管这个网站的页面背后有着多么复杂的交互逻辑、多庞大的用户量、多么海量的数据、多么高的并发…
首先你得有个页面吧！不能让用户一访问网站直接给人家看数据库吧！

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

布局可不仅仅只是把数据整齐的罗列在页面上这么简单，一个合适的布局可以令用户的操作非常顺畅。同时在不同的场景下也应选择不同的布局，如果选错布局的话很可能会导致用户对页面的操作不丝滑，哪怕最初呈现出来的数据都是一样的。

3. 前端的优势

网页有一个最优秀的特点就是它的跨平台性，一个前端程序员写出的页面，既可以运行在 Windows 的浏览器上、也可以运行在 MacOS 的浏览器上、还可以运行在 IOS 和安卓浏览器上。正是由于网页所具备的优异跨平台性扩展出了套壳网页的这种形式，比如看起来只是个 apk 的安卓程序，点击也能安装到手机中，但实际上里面的内容都是网页…

还有现在红极一时的小程序，其实在很早以前小程序就已经火起来了，但这次疫情真的是把小程序彻底推向了一个巅峰：去商场要扫小程序二维码、坐高铁要扫小程序二维码、去麦当劳要用小程序点餐、去景点参观要用小程序预约、去看电影要用小程序订票…

那么小程序其实是和前端技术是分不开的，虽然腾讯觉得自己搞的东西不能叫HTML、CSS，取而代之的是 WX(微信)ML、WX(微信)SS… 但其实还是换汤不换药，语法什么的都基本一致，好多东西甚至连名称都没改。

而且我们现在做小程序也有那种多端小程序框架：uni-app、mpvue、taro等…
这里用的都是 CSS 而不是 微信SS 。

所以学会了移动端布局，不仅仅可以把学到的知识运用到移动端的网页上、还可以用到 React Native、小程序、快应用、Weex等这些前端演变出来的技术上。

4. 本课程的设计思路

首先我们会用最被广泛使用同时还特别简单的一种布局(居中布局)来作为开篇第一个布局进行切入，由浅入深，用各种各样五花八门的 CSS 技术来实现同一种布局，以丰富大家的视角。

同时我们的布局也是各式各样，基本把最常见的几种布局方式都罗列了出来：

• 居中布局
• 单列布局
• 双列布局
• 吕形布局
• 上下栏布局
• 九宫格布局
• 响应式布局

尤其是最后这两种布局，用肉眼看可能没啥，但实际用代码实现还是较为复杂的，不过也有简便方式，在每门课(除了单列布局)的第一小节，我们都会使用一个非常利于我们学习和记忆的 CSS 库：chinese-layout ，这个 CSS 库的神奇之处就在于可以使用一部分中文关键字，原理其实就是 CSS变量 ，用它很轻松的就可以实现出一个布局。

用它我们就可以两行代码实现一个布局，当然，不仅要学会库的使用，还要学会经典 CSS 技术的运用：

• 左浮动
• 自动外边距
• 绝对定位
• 固定定位

这些技术兼容性都非常的好，但在下一章我们就会讲一下移动端浏览器的兼容性为什么比 PC 端的好一些，在这种广泛支持 CSS3 的大背景下，我们还要学习新技术的运用：

• 多列属性
• 行内块元素
• 表格布局
• 弹性布局
• 网格布局
• 媒体查询

5. 前置知识

本门课程虽然为初学者课程，但并不代表你已经工作了这门课就不适合你了。假如屏幕前的你在工作过程中写的页面多数是显示在 PC 端的，但对移动端了解较少，这门课还是值得去深入学习的。

另一方面即使你的工作过程中也写了很多移动端的网站，你也可以来看一看你有没有全部掌握课程中的各种布局的所有实现方式。因为即便是同一种布局，也会有各种各样的不同方式可以实现，加深一下印象，下次跳槽面试的时候就不怕面试官的各种刁难了。

同时，如果屏幕前的你什么也不会，只知道想入门前端需要学 HTML + CSS + JS ，那么这门课大概率你是看不懂的，多少还是需要对 HTML 和 CSS 有一定的了解才行。

6. 结语

小白同学不要被我上面那段话吓到哈，本门课程从技术角度来讲并不难，难的只是思路较多，从这个思路出发可以实现这种布局、换个思路依然可以实现这种布局，有利于开阔大家的视野和思路。

而且像我说的，很少有前端只做 PC 页面而不碰移动端的了，因为移动端互联网本身就已经赶超 PC 上网了，同时又不仅仅是浏览网页这么简单，就想想你扫的那堆健康码小程序是不是前端做出来的吧。

既然《移动端布局》的用途这么广泛，那还等什么呢？赶紧上车，一起去开起布局世界的大门吧！