这个项目是关于响应式的学习的。在学习中实现的是一个金融投资公司的首页，可以看看这个项目的效果自行理解。设计图在源码目录里。
- 前期准备
- 如何组织项目目录结构
- 开始编写HTML代码
- 如何实现PC端的样式
- 如何实现移动端的样式
- 如何实现响应式广告及响应式图片
- Node.js简介
- 如何处理兼容性及在多个设备上进行调试
- 如何打包发布
- 选择一个趁手的IDE
- 聊聊原型设计和切图
- 课程大作业
在做这个项目的时候首先是组织项目目录结构。所有代码都写在src中，在src中分为了，css、img、js这三个基本的目录。
课程拓展内容：
- 404页面的制作
- favicon.ico title图标
- humans.txt 这样的纯文本文件用于网站作者，通过这个文件，可以快速了解这个网站的开发团队信息，和背后的故事
- CHANGLOG.md 项目每个版本的更新，说明版本号、更新内容、修复了哪些问题等
- LICENSE.txt 本项目所用协议
- README.md 用于介绍整个项目
其实还有一些文件我没有写上，比如：关于编辑器格式的文件，git版本管理等...
从目录就可以知道该项目做实现的过程（这也是为什么我把课程目录贴上来的原因）。
准备好我们的工作区之后就可以正式编写index.hmtl文件了。
根据设计图先将内容相关的代码写入html文件。
这里写的是先实现PC端，其实也可以先实现移动端，这个是没有任何先后关系的。在写css的时候，也可以使用sass这样的预处理工具，这里就不说关于sass相关的东西。
回到内容中：第一先去掉浏览器默认的一些样式。这里有两种方式：
- normalize.css
- cssresets.css
cssresets的作用是让各个浏览器的css样式有一个统一的基准，而这个基准更多的就是“清零”！不过这样就会加很多的不需要的css渲染，还会增减css的文件（虽然很少）。
所有就有了第二中normalize.css。它也可以让不同的浏览器在渲染网页元素的时候形式更统一。那么它能干啥？
- 保留有用的默认值，这里就不同于许多css的重置
- 标准化的样式，适用范围广的元素
- 纠正错误和常见的浏览器的不一致性
- ...
做了以上的工作就按着设计图写css吧。写了好了pc端以后，就用媒体查询写移动端的css样式。这里也写好了。就解决响应式图片的问题（并不是图片的大小随着页面的大小一起改变就算是响应式图片。还要根据不同的分辨率，加载不同的图片）。这里就有怎么解决响应式图片的问题： 响应式图片：
- 图片的排版和布局
- 根据设备大小加载不同的图片
如何实现？
- js或服务器
- srcset
- srcset配合sizes
- picture
- svg
这里是有道云笔记 ：http://note.youdao.com/noteshare?id=abc7d6110239ca964df87f6677a95a43
处理兼容也就是我们写页面的时候只是在某个浏览器下调试的，那么对于其他浏览器呢？所以这里就需要写好了之后在其他浏览器上去跑一跑。如果发现有地方不对，就可以改：
可以看这里
这里是有道云笔记 ：http://note.youdao.com/noteshare?id=abc7d6110239ca964df87f6677a95a43
解决好兼容后，就可以打包发布了。这时主要做什么呢？
- 压缩
- 合并
- 增加版本号
打包方式
- 手动打包：将自己的代码复制到这样的一个工具里，压缩后拷贝回去。 https://javascropt-minifier.com
- 自动打包：gulp
可以看这里
这里是有道云笔记 ：http://note.youdao.com/noteshare?id=abc7d6110239ca964df87f6677a95a43
做到这里这个项目也查不到完成了！
-
做项目的时候把前期工作准备好
- 需要哪些东西依赖文件。
- 项目的目录
- 自动化构建搭好
-
响应式图片
-
根目录下的其他各种文件
-
解决浏览器默认样式
-
解决兼容
-
解决浮动问题