所向披靡的响应式开发

这个项目是关于响应式的学习的。在学习中实现的是一个金融投资公司的首页，可以看看这个项目的效果自行理解。设计图在源码目录里。

本课程的目录及常用文件

1. 前期准备
2. 如何组织项目目录结构
3. 开始编写HTML代码
4. 如何实现PC端的样式
5. 如何实现移动端的样式
6. 如何实现响应式广告及响应式图片
7. Node.js简介
8. 如何处理兼容性及在多个设备上进行调试
9. 如何打包发布
10. 选择一个趁手的IDE
11. 聊聊原型设计和切图
12. 课程大作业

在做这个项目的时候首先是组织项目目录结构。所有代码都写在src中，在src中分为了，css、img、js这三个基本的目录。

课程拓展内容：

• 404页面的制作
• favicon.ico title图标
• humans.txt 这样的纯文本文件用于网站作者，通过这个文件，可以快速了解这个网站的开发团队信息，和背后的故事
• CHANGLOG.md 项目每个版本的更新，说明版本号、更新内容、修复了哪些问题等
• LICENSE.txt 本项目所用协议
• README.md 用于介绍整个项目

其实还有一些文件我没有写上，比如：关于编辑器格式的文件，git版本管理等...

页面的制作

从目录就可以知道该项目做实现的过程（这也是为什么我把课程目录贴上来的原因）。

准备好我们的工作区之后就可以正式编写index.hmtl文件了。

第一步：写结构

根据设计图先将内容相关的代码写入html文件。

第二步：写css 实现PC端断码

这里写的是先实现PC端，其实也可以先实现移动端，这个是没有任何先后关系的。在写css的时候，也可以使用sass这样的预处理工具，这里就不说关于sass相关的东西。

回到内容中：第一先去掉浏览器默认的一些样式。这里有两种方式：

1. normalize.css
2. cssresets.css

cssresets的作用是让各个浏览器的css样式有一个统一的基准，而这个基准更多的就是“清零”！不过这样就会加很多的不需要的css渲染，还会增减css的文件（虽然很少）。

所有就有了第二中normalize.css。它也可以让不同的浏览器在渲染网页元素的时候形式更统一。那么它能干啥？

1. 保留有用的默认值，这里就不同于许多css的重置
2. 标准化的样式，适用范围广的元素
3. 纠正错误和常见的浏览器的不一致性
4. ...

做了以上的工作就按着设计图写css吧。写了好了pc端以后，就用媒体查询写移动端的css样式。这里也写好了。就解决响应式图片的问题（并不是图片的大小随着页面的大小一起改变就算是响应式图片。还要根据不同的分辨率，加载不同的图片）。这里就有怎么解决响应式图片的问题： 响应式图片：

• 图片的排版和布局
• 根据设备大小加载不同的图片

如何实现？

• js或服务器
• srcset
• srcset配合sizes
• picture
• svg

这里是有道云笔记 ：http://note.youdao.com/noteshare?id=abc7d6110239ca964df87f6677a95a43

处理兼容

处理兼容也就是我们写页面的时候只是在某个浏览器下调试的，那么对于其他浏览器呢？所以这里就需要写好了之后在其他浏览器上去跑一跑。如果发现有地方不对，就可以改：

可以看这里
这里是有道云笔记 ：http://note.youdao.com/noteshare?id=abc7d6110239ca964df87f6677a95a43

打包发布

解决好兼容后，就可以打包发布了。这时主要做什么呢？

1. 压缩
2. 合并
3. 增加版本号

打包方式

• 手动打包：将自己的代码复制到这样的一个工具里，压缩后拷贝回去。 https://javascropt-minifier.com
• 自动打包：gulp

可以看这里
这里是有道云笔记 ：http://note.youdao.com/noteshare?id=abc7d6110239ca964df87f6677a95a43

做到这里这个项目也查不到完成了！

小结

1. 做项目的时候把前期工作准备好

   1. 需要哪些东西依赖文件。
   2. 项目的目录
   3. 自动化构建搭好

2. 响应式图片

3. 根目录下的其他各种文件

4. 解决浏览器默认样式

5. 解决兼容

6. 解决浮动问题