标题：

移动端有哪些常见的布局方式？

开场语：

大家好，我是IT修真院成都分院第16期的学员彭力，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网css任务13，深度思考中的知识点——移动端有哪些常见的布局方式？

（1）背景介绍：

随着智能手机的普及以及社会的发展，传统的网站布局已经无法适应现状，我们编写的网页不仅仅要展示在电脑上， 也要展示在移动设备上，而移动设备种类繁多，苹果、小米、三星等等，各个手机的屏幕大小不一，一般的电脑端的页面布局在手机上无法完全适应，那么如何让一个页面匹配各个页面呢？ 现在我们来看看下面的几种布局方式。

（2）知识剖析：

1、 固定布局

固定布局是第一次做移动端时最好的选择方式,思路沿用PC端,上手比较快。在标签里把 viewport 加好,然后设想整个网页的宽度为 320px 即可。 其他地方根据 PC 端来布局。 缺点:大屏手机显示网页比较宽,固定布局宽度参照永远是 320px,导致左右两 边会有空白。

2、流体布局

流动布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同，流动布局就是使用百分比来代替px作为单位。 优点是流动布局可以很好解决自适应需求。缺点是不够灵活，添加元素时，需要更改其他元素的值。

3、flex布局

Flexbox是css3引入新的布局模式，也称弹性布局，会根据页面的剩余宽度自动分配空间。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测的展现出来，能够扩展和收缩flex容器内的元素，以最大限度的填充可以空间。 Flexbox布局最适合应用程序的组件和小规模的布局。

4、媒体查询和rem布局

媒体查询可以根据不同的设备宽度加载不同的css样式。rem是一个相对单位，会根据节点的字体大小来计算，使用媒体查询

和rem可以实现移动端的响应式。

如：媒体查询

@media screen and (max-width:768px) {

在这个范围里写上你要修改的css样式。

}

5、栅格布局

bootstrap是一个比较流行的响应式前端框架，利用bootstrap的栅格系统可以实现响应式的移动端布局。栅格系统：是bootstrap中定义了一套响应式的网格系统，其使用方式就是将一个容器划分成12列。然后通过col-的类名控制每一列的占比，使用的时候给相应的div设置col-lg-3，md，sm，xs，以此完成布局。

如：

.col-lg-2-1 {

        width: 20%;

      }

.col-md-12 {

        width: 100%;

      }

.col-sm-12 {

        width: 100%;

      }

（3）常见问题：

移动端字体单位font-size选择px还是rem?

（4）解决方案：

由于手机屏幕较小，且各种屏幕尺寸不同，会导致单位字体变化，显得格格不入。 移动端的字体选择。对于只需要适配手机设备，使用px即可。对于需要适配各种移动设备， 例如需要适配iPhone和iPad等分辨率差别比较挺大的设备，就要使用rem了，有时还需要配合媒体查询一起使用。

（5）编码实战

见dome。

（6）扩展思考：

移动端与pc端的区别？

1、pc端考虑的是浏览器的兼容性，移动端考虑的是手机兼容性，现在不管什么系统的手机还是浏览器都是使用webkit内核，但是做移动端开发，更多的是考虑手机分辨率的适配和不同操作系统的略微差异化。

2、在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。另外包括移动端弹出的手机键盘的处理，这样的问题在pc端都遇不到的。

3、在布局上，移动端开发一般是要做到布局自适应的，我使用的一直是rem布局，感觉很好。

4、在动画处理上，PC端由于要考虑IE的兼容性，所以通常使用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲，而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3， 既简单、效率又高。

（7）参考文献：

参考一： 移动Web开发中的常见布局方式及一些常见问题

参考二：浅谈前端移动端页面开发（布局篇）

（8）更多讨论：

问题：1、你们觉得响应式好呢，还是手机和PC端分开来写？

回答：知乎这里们有答案，各有各的优势以及缺点，可以参考下。

问题：2、如何解决移动端click屏幕产生200-300ms的延迟响应问题？

回答：fastclick可以解决在手机上点击事件的300ms延迟。或者zepto的touch模块，tap事件也是为了解决在click的延迟问题。

问题：3、如何模拟按钮的hover效果？

回答：移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活css的active效果，

（9）鸣谢：

感谢各位师兄，此教程是在他们之前技术分享的基础上完善而成。

（10）结束语：

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~