任务十一：移动Web页面布局实践

Posted 2020-08-19

面向人群：

有一定html及CSS基础，想要尝试移动开发

难度：

中

重要说明

百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。

课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。

任务目的

• 进行移动开发时的HTML及CSS实践
• 掌握移动Web开发在页面架构和布局的方法及差异性
• 掌握移动Web开发页面调试的方法

任务描述

• 实现与 设计图（点击查看） 一致的移动端Web页面

任务注意事项

• 本任务只涉及 HTML 及 CSS
• 实现的页面和设计图在ios Safari，微信，android浏览器中均基本一致
• HTML 及 CSS 代码结构清晰、规范
• 尝试在适合的地方使用CSS 3中的flex布局
• 有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次

任务协作建议

• 团队集中讨论，明确题目要求，保证队伍各自对题目要求认知一致
• 各自完成任务实践
• 交叉互相Review其他人的代码，建议每个人至少看一个同组队友的代码
• 相互讨论，最后合成一份组内最佳代码进行提交

在线学习参考资料

• MDN:手机网页开发
• MDN:在移动浏览器中使用viewport元标签控制布局
• 移动前端开发和 Web 前端开发的区别是什么
• Alloyteam移动开发规范概述
• 手机/移动前端开发需要注意的20个要点
• w3cplus响应式技术资源
• 浅谈移动Web开发
• Alloyteam Mars
• 移动WEB开发入门
• 移动开发资源集合
• The Mobile Web Handbook
• MobileWeb 适配总结
• 移动前端不得不了解的html5 head 头标签