这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

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

大家好，我是IT修真院北京分院25期的学员，一枚正直纯洁善良的web前端程序员

今天给大家分享一下，修真院官网css任务13，深度思考中的知识点——移动端有哪些常见的布局方式？

1.背景介绍

随着智能手机的普及以及社会的发展，传统的网站布局已经无法适应现状，我们编写的网页不仅仅要展示在电脑上，也要展示在移动设备上，而移动设备种类繁多，一般的电脑端的页面布局在手机上无法完全适应，所以在手机端上我们要重新布局。

2.知识剖析

2.1固定布局

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

demo

2.2流体布局

流布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同。固定宽度布局使用的是像素，但是流布局使用的是百分比，看到百分比，你应该想到，这将提供了很强的可塑性和流动性。换句话说，通过设置了百分比，你将不需要考虑设备尺寸或者屏幕宽度大小了，结论就是，你可以为每种情形找到一种可行的方案，因为你的设计尺寸将适应所有的设备尺寸。

demo

2.3FLEX布局

flex也称为弹性布局，他会根据页面的剩余宽度自动分配空间。

2.4栅格布局

bootstrap是一个比较流行的响应式前端框架，利用bootstrap的栅格系统可以实现响应式的移动端布局。

3.常见问题

移动端和PC端的区别

4.解决方案

第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。

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

第三：在移动端有很多网页是可以横屏看也可以竖屏看，并且很多屏幕的饿分辨率都是不一样的，所以只要牵涉到移动端都要考虑用响应式布局

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

第五：Pc端的交互是鼠标，键盘的交互而移动端变成了触摸，手势的交互

5.编码实战

6.扩展思考

手机端软件界面设计中的几种常用布局样式

7.参考文献

参考一：

参考二：

8.更多讨论

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

网址

9.鸣谢

感谢大家观看

BY :王姝丽

ppt

视频链接:密码: xdcp