课程简介
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 上网了，同时又不仅仅是浏览网页这么简单，就想想你扫的那堆健康码 小程序 是不是前端做出来的吧。
既然《移动端布局》的用途这么广泛，那还等什么呢？赶紧上车，一起去开起布局世界的大门吧！