移动端有哪些常见布局方式？
你们好，我是IT修真院深圳分院第九期的学员徐炜，一枚正直、纯洁、善良的前端程序员。css
今天给你们分享一下，修真院官网css任务13，深度思考中的知识点——移动端有哪些常见布局方式？html
1.背景介绍前端
随着智能手机的普及以及社会的发展，传统的网站布局已经没法适应现状，咱们编写的网页不只仅要展现在电脑上， 也要展现在移动设备上，而移动设备种类繁多，苹果、小米、三星等等，各个手机的屏幕大小不一，通常的电脑端的页面布局在手机上没法彻底适应，那么如何让一个页面匹配各个页面呢？ 如今咱们来看看下面的几种布局方式。jquery
2.知识剖析android
1>.固定布局ios
固定布局是第一次作移动端时最好的选择方式,思路沿用PC端,上手比较快。在标签里把 viewport 加好,而后设想整个网页的宽度为 320px 便可。 其余地方根据 PC 端来布局。 缺点:大屏手机显示网页比较宽,固定布局宽度参照永远是 320px,致使左右两 边会有空白。git
演示demo程序员
2>.流动布局github
流动布局与固定宽度布局基本不一样点就在于对网站尺寸的测量单位不一样，流动布局就是使用百分比来代替px做为单位。 优势是流动布局能够很好解决自适应需求。缺点是不够灵活，添加元素时，须要更改其余元素的值。web
3>.bootstrap布局
bootstrap是一个比较流行的响应式前端框架，利用bootstrap的栅格系统能够实现响应式的移动端布局。栅格系统：Bootstrap中定义了一套响应式的网格系统，其使用方式就是将一个容器划分红12列，而后经过col-xx-xx的类名控制每一列的占比， 在使用的时候，咱们给相应的div设置col-lg-2 col-md-3 col-sm-4 col-xs-6，以此完成布局。
4>.媒体查询+REM布局
使用媒体查询能够根据不一样的设备宽度加载不一样的css样式。rem是一个相对单位，会根据根节点的字体大小来计算的，使用媒体查询和rem能够实现移动端的响应式。
5>.flex布局
Flexbox是CSS3引入的新的布局模式，也称为弹性布局，他会根据页面的剩余宽度自动分配空间。 它决定了元素如何在页面上排列，使它们能在不一样的屏幕尺寸和设备下可预测地展示出来。它可以扩展和收缩 flex 容器内的元素， 以最大限度地填充可用空间。Flexbox布局最适合应用程序的组件和小规模的布局，而网格布局更适合那些更大规模的布局。
3.常见问题
移动端字体单位font-size选择px仍是rem?
4.解决方案
因为手机屏幕较小，且各类屏幕尺寸不一样，会致使单位字体变化，显得格格不入。 移动端的字体选择。对于只须要适配手机设备，使用px便可。对于须要适配各类移动设备， 例如须要适配iPhone和iPad等分辨率差异比较挺大的设备，就要使用rem了，有时还须要配合媒体查询一块儿使用。
5.编码实战
见dome里。
6.扩展思考
移动端和PC端的区别？
（1）PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，由于目前不论是android手机仍是ios手机，通常浏览器使用的都是webkit内核，因此说作移动端开发，更多考虑的应该是手机分辨率的适配，和不一样操做系统的略微差别化。
（2）在部分事件的处理上，移动端多出来的事件是触屏事件，而缺乏的是hover事件。 另外包括移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的。
（3）在布局上，移动端开发通常是要作到布局自适应的，我使用的一直是rem布局，感受很好。
（4）在动画处理上，PC端因为要考虑IE的兼容性，因此一般使用JS作动画的通用性会更好一些，可是CSS3作了很大的牺牲， 而在手机端，若是要作一些动画、特效等，第一选择确定是CSS3， 既简单、效率又高。
（5）通常pc端用jquery，移动端用zepto，由于移动端的流量仍是比较重要的， 因此引入的资源或者插件，能小则小，一个30k的资源和一个80k的资源，在移动端的差异仍是挺大的。
（6）好比在手机上的300ms的延迟，这在PC端是没有的，若是咱们但愿作成webapp，那么天然就不须要这300ms的延迟，因此可使用hammer-time.js来移除这300ms的延迟。
7.参考文献
参考一： 移动Web开发中的常见布局方式及一些常见问题
参考二：浅谈前端移动端页面开发（布局篇）
参考三：10分钟学会基本的 Flexbox 布局
8.更多讨论
（1）如何模拟按钮的hover效果？
（2）如何在移动端禁止用户选中内容？
（3）如何解决移动端click屏幕产生200-300ms的延迟响应问题？
感谢叶紫阳师兄和王姝丽学姐，此教程是在他们以前技术分享的基础上完善而成。
今天的分享就到这里啦，欢迎你们点赞、转发、留言、拍砖~