黑马程序员技术交流社区

标题: 前段移动开发的技巧 [打印本页]

作者: OldKwan 时间: 2019-7-15 09:58
标题: 前段移动开发的技巧

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里如果内容字数不一样，会撑开。

作者: 翻滚君 时间: 2019-7-16 16:32
只要朝着一个方向努力，一切都会变得得心应手。加油

作者: 柠檬leung不酸 时间: 2019-7-18 12:02
“有人说...学习是为了完善人生，而非享乐人生，追求卓越，成功就会在不经意间追上你……”

作者: tangtie 时间: 2019-7-25 17:08

能坚持学习的人都是最棒的。

作者: 卡哇伊伊 时间: 2019-7-31 12:55
预测未来最好的方法就是去创造未来。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2