大家好，我是IT修真院郑州分院第五期的学员王姝丽，一枚正直、纯洁、善良的前端程序员。
今天给大家分享一下，修真院官网css任务13，深度思考中的知识点——移动端有哪些常见布局方式？
1.背景介绍
随着智能手机的普及以及社会的发展，传统的网站布局已经无法适应现状，我们编写的网页不仅仅要展示在电脑上，也要展示在移动设备上，而移动设备种类繁多，一般的电脑端的页面布局在手机上无法完全适应，所以在手机端上我们要重新布局。
2.知识剖析
固定布局
固定布局是第一次做移动端时最好的选择方式,思路沿用PC端,上手比较快。在标签里把 viewport 加好,然后设想整个网页的宽度为 320px 即可。 其他地方根据 PC 端来布局。 缺点:大屏手机显示网页比较宽,固定布局宽度参照永远是 320px,导致左右两 边会有空白。
.box{
width: 320px;
height: 650px;
margin: 0 auto;
background-color: #29b078;
color: white;
}
流体布局
流布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同。固定宽度布局使用的是像素，但是流布局使用的是百分比，看到百分比，你应该想到，这将提供了很强的可塑性和流动性。换句话说，通过设置了百分比，你将不需要考虑设备尺寸或者屏幕宽度大小了，结论就是，你可以为每种情形找到一种可行的方案，因为你的设计尺寸将适应所有的设备尺寸。
.box1{
width: 38%;
float: left;
margin: 5%;
}
bootstrap布局
bootstrap是一个比较流行的响应式前端框架，利用bootstrap的栅格系统可以实现响应式的移动端布局。
bootstrap的栅格是基于百分比的，在使用的时候，我们给相应的div设置col-sm-4, col-md-6,col-lg-12。
class="c1 col-lg-2 col-md-3 col-sm-4 col-xs-6"
多列布局
column-count是css3的一个属性，主要用于文本元素，支持响应式。
column-count属性指定某个元素应分为的列数。
column-width属性指定列的宽度。
.box1{
columns: 200px 3;
padding: 50px 0;
}
flex布局
flex也称为弹性布局，他会根据页面的剩余宽度自动分配空间。
3.常见问题
移动端和PC端的区别
4.解决方案
第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。
第二： 在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的
第三：Pc端最常用的布局是固定宽度为980px（也有960px，1000px，1200px）；而在移动端，因为有很多网页是可以横屏看也可以竖屏看，并且很多屏幕的饿分辨率都是不一样的，所以只要牵涉到移动端都要考虑用响应式布局
第四： 在动画处理上，PC端由于要考虑IE的兼容性，所以通常使用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲， 而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3， 既简单、效率又高。
第五： 一般pc端用jquery，移动端用zepto，因为移动端的流量还是比较重要的， 所以引入的资源或者插件，能小则小，一个30k的资源和一个80k的资源，在移动端的差别还是挺大的。
第六：Pc端的交互是鼠标，键盘的交互而移动端变成了触摸，手势的交互
5.编码实战
都在dome里。
6.扩展思考
手机端软件界面设计中的几种常用布局
7.参考文献
参考一：前端：移动端和PC端的区别
参考二：移动端布局浅谈
8.更多讨论
1、你们觉得响应式好呢，还是手机和PC端分开来写？
网址这里是知乎的一个讨论，还是还根据情况而定。
2、columns:200px 2;好像并没有显示200px宽。
在实际布局中，所定义的列数是最大的列数。当浏览器宽度不足，多列的列数会自动减少，而每列的宽度会自动调整。当浏览器宽度不足时，3列就会自动变成2列，而宽度也不再是200px。
视频链接
_腾讯视频
感谢叶紫阳师兄，此教程是在他们之前技术分享的基础上完善而成。
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
我的学习邀请码：12164783 或者你可以直接点击此链接：http://www.jnshu.com/login/1/12164783
网友评论