1. 固定布局
固定布局是第一次做移动端时最好的选择方式，思路沿用PC端，上手比较快。在<head>标签里把viewport加好，然后设想整个网页的宽度为320px即可。其他地方根据PC端来布局。 缺点：大屏手机显示网页比较宽，固定布局宽度参照永远是320px，导致左右两边会有空白。
2. 流动布局
流动布局重点就是使用百分比来代替传统px作为单位（当前容器宽度除以父级容器实际宽度）。例如设计稿宽度为640px，上面有一个导航里包含四个菜单，四周边距为20px，四个菜单等宽，那么边距应该为20px/640px=3.125%，每个菜单的宽度为100%/4=25%。demo里还有边框，所以记得改变盒子模型，加box-sizing:border-box。 优点：无论网页宽度如何改变，四个菜单的宽度永远一样，并且等宽。
缺点：不够灵活，如果菜单数量有变化，就满足不了了。
3.浮动布局
通过使用float属性，让列表元素依次排列的布局（通常是左浮动，float:left）
对于浮动局部的局限性，就是每个列表元素的高度必须要一致，例如一个左浮动列表布局，如果第一行有个列表高度高于其他列表，那就在第二行，第一个元素会沿着最高元素的右侧对齐
但是这种浮动方式对于开发人员来说，这种循环是最简单的。再加上:nth-child伪类处理边距，所以，好多人都没有放弃浮动布局。当然，现在大部分都不需要兼容老版本IE了，浮动的写法也变得简单许多。需要清除浮动的话，4. Flexbox布局
例如上面第2点说的流动布局用百分比做的宽，局限性就是无法增加删除菜单，改变菜单数量。如果改为用Flexbox布局，这个问题迎刃而解，不论菜单有多少个，都自动等宽排列成一行。具体想要学习Flexbox布局的，请参考下面的链接：http://www.w3cplus.com/css3/flexbox-basics.html
5. 混合布局
混合布局就是把所有学到的知识，灵活运用在布局中。
6. 定位布局
定位在移动端也用得挺多，特别是弹窗。
注：需要各位手机网站前端开发人员需要注意的常见问题： （1）虽然移动端不用写:hover，但光写个:active是不够的。实测Android 2.3下按过的按钮会留下浏览器默认颜色，所以记得给:visited也加个颜色。 （2）遇到写动画animation时候，不要用到伪类上。不然Android是没效果的。 （3）用Flexbox做等分时，记得给宽度。不然Android里如果内容字数不一样，会撑开。 |
|
收藏
淘帖
踩
