服务购

　　现在越来越多的小伙伴们开始进行了手机wap网站的移动端开发。手机网站怎么布局呢？大家必须去先了解手机网站常用的几种布局方案的优缺点，才能决定自己使用什么样的布局方案。

　　1、浮动布局

　　很多乐观的人，看到Flexbox最新一版的规范，满心欢喜的觉得移动端可以不用浮动布局了。但很遗憾，对于Android 2.3支持的Flexbox老规范，连最简单的多行商品按顺序排列，都实现不了。对于这种情况，我喜欢用传统的浮动方式。因为对于开发人员，这种循环是最简单的。再加上:nth-child伪类处理边距，干脆利落。所以，我并没有放弃浮动布局。当然，因为不需要兼容老版本IE了，浮动的写法也变得简单许多。

　　2、流动布局

　　以前PC端很少用到这种布局，因为我们需求要么网页就一种宽度，要么就两种宽度，分宽窄屏处理。而手机上不同，大部份手机默认宽度都不一样，所以流动布局可以很好解决自适应需求。流动布局重点就是使用百分比来代替传统px作为单位（当前容器宽度除以父级容器实际宽度）。优点是无论网页宽度如何改变，四个菜单的宽度永远一样，并且等宽。缺点是不够灵活，如果菜单数量有变化，就满足不了了。

　　3、固定布局

　　固定布局是第一次做移动端的朋友们最好的选择方式，思路沿用PC端，上手比较快。里把viewport加好，然后设想整个网页的宽度为320px即可。其他地方PC端怎么布局，这里类似即可。

　　缺点也显而易见，大屏手机显示网页比较宽，而固定布局宽度参照永远是320px，导致左右两边会有空白。就像你用27寸显示器看980px宽度网页一样。另一个方面就是手机横屏的时候，两边空白更宽。

　　手机网站怎么布局以及常见的三种手机网站布局方案就是小编上面介绍的内容了，看完了您觉得对您自己有帮助吗？如果您还想知道更多相关的内容，可以关注猪八戒网，上面有很多精彩内容为您呈现。