移动端常见的布局方式汇总

前言

移动前端开发正在逐渐步入前端技术的主流，其实跟PC端需要掌握的技术是一样的，不过在PC 端上写的页面在多数情况下并不适用于手机端，必须知道这其中的注意点。当然移动端给人的感觉就是H5和CSS3，觉得最欣慰的就是不用再调IE兼容了。

固定布局

固定布局是第一次做移动端时最好的选择方式，思路沿用PC端，上手比较快。在标签里把viewport加好，然后设想整个网页的宽度为320px即可。其他地方根据PC端来布局。

缺点：大屏手机显示网页比较宽，固定布局宽度参照永远是320px，导致左右两边会有空白。

流动布局

流动布局重点就是使用百分比来代替传统px作为单位（当前容器宽度除以父级容器实际宽度）。例如设计稿宽度为640px，上面有一个导航里包含四个菜单，四周边距为20px，四个菜单等宽，那么边距应该为20px/640px=3.125%，每个菜单的宽度为100%/4=25%。demo里还有边框，所以记得改变盒子模型，加box-sizing:border-box。 优点：无论网页宽度如何改变，四个菜单的宽度永远一样，并且等宽。缺点：不够灵活，如果菜单数量有变化，就满足不了了。

浮动布局

浮动布局通过使用float属性，让列表元素依次排列的布局（通常是左浮动，float:left）对于浮动局部的局限性，就是每个列表元素的高度必须要一致，例如一个左浮动列表布局，如果第一行有个列表高度高于其他列表，那就在第二行，第一个元素会沿着最高元素的右侧对齐，如下图

但是这种浮动方式对于开发人员来说，这种循环是最简单的。再加上:nth-child伪类处理边距，所以，好多人都没有放弃浮动布局。当然，现在大部分都不需要兼容老版本IE了，浮动的写法也变得简单许多。需要清除浮动的话，如下图