# 移动 Web 页面布局实践
# 课程目标
- 进行移动开发时的 HTML 及 CSS 实践
- 掌握移动 Web 开发在页面架构和布局的方法及差异性
- 掌握移动 Web 开发页面调试的方法
# 阅读
- MDN 手机网页开发 (opens new window)
- 视口概念 - CSS（层叠样式表） | MDN (opens new window)
- 移动前端开发和 Web 前端开发的区别是什么 (opens new window)
- Alloyteam 移动开发规范概述 (opens new window)
- 手机 / 移动前端开发需要注意的 20 个要点 (opens new window)
- w3cplus 响应式技术资源 (opens new window)
- 浅谈移动 Web 开发 (opens new window)
- 移动 web 开发基础知识讲解 (opens new window)
- Alloyteam Mars (opens new window)
- 移动 WEB 开发入门 (opens new window)
- 移动开发资源集合 (opens new window)
- The Mobile Web Handbook (opens new window)
- MobileWeb 适配总结 (opens new window)
- 移动前端不得不了解的 html5 head 头标签 (opens new window)
# 编码
实现与设计图 (opens new window)一致的移动端 Web 页面
- 本任务只涉及 HTML 及 CSS
- 实现的页面和设计图在 iOS Safari ，微信，Android 浏览器中均基本一致
- HTML 及 CSS 代码结构清晰、规范
- 有能力的同学可以在实现一遍后尝试用 less、sass 或者 stylus 等再实现一次
# 提交
把你的代码提交到 Github ，把 Github 地址提交到作业里，如果有余力的同学，可以学习如何在 Github 中预览你的 HTML 代码，并提交预览地址。
# 总结
找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：
- 日期，今天的学习总用时，今天学习的目标是什么，是否达成
- 哪些东西今天了解得比较透彻，说说自己的理解
- 哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
- 哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决
# 自测问题
学习之后，对下列问题进行自我回答来检验自己本次学习的理论知识掌握程度。
- Html 元素的宽度是由谁决定的？
- DPR , PPI ， DPPX ，DPI 分别表示什么意思？