By ChenChiFeng

• 前期:

  • 分析设计图 -> 标注 -> 切图

  • 基本文件结构组建 -> 基本文件创建/添加

• 进行:

  • html:页面基本代码的编写 -> 整理/语义优化html代码

  • css: CSS Resets(统一默认样式) -> 编写基本默认值 -> 编写工具样式(例如隐藏元素、清除浮动的class) -> 逐步完成每个部分的样式(我的步骤是头部>脚部>从上到下的主内容)

  • js(轮播插件): 通过搜索引擎找合适轮播插件 -> 下载并引入插件必须的css(head里引入) -> 引入js(页面底部前引入) -> html的引入(编写基本的html结构,使用picture标签)

  • 响应式设计:媒体查询的设置 (
    @media only screen and (....){...}
    ....是查询规则,如max-width:50rem;...是媒体查询的样式。
    当符合查询规则的时候就会应用媒体查询的样式的了。
    分别设置了大屏/中屏/小屏的媒体查询,原css是巨屏的。
    优先大屏还是小屏的设置,建议看具体的设计需求。
    )

• 后期：

  • 测试排错(例如一些因为浮动而产生的高度塌陷->清除浮动,例如js的语法错误等) ->优化

  • 编写相关文档

  • 上传到github

1. 减少尺寸 也就是,例如line-height(行高),font-size(字体大小),padding(内填充),margin(外边距),width(宽度),height(高度),font-weight（字体粗细）等。

2. 隐藏(减少内容) 例如dispaly:none;(隐藏元素),border:none;(隐藏边框)等，font-size:0;(隐藏文字内容,这个也可以用于消除换行符/空白字符产生的空隙),opacity:0(不透明度:0);visibility: hidden;(可见性:隐藏)等。

3. 换行 dispaly:block;(显示为块状元素,相当于), float:none;(不浮动), 通常这样就和clear:both;差不多了,让元素独占一行。

4. 对齐方式 例如换行后的居中;text-align:center;(文字居中),width:40;margin: 0 auto;(元素居中)等。

5. 非位移变化（其实有些也属于隐藏） 例如color(字体颜色),background-color:transparent;(背景颜色变透明),box-shadow(盒子阴影),text-shadow(文字阴影)等。

6. 增大内容显示区域比例: 例如width:90%; -> width:96%;...(加大宽度占比,减少外边距,减少字体大小等);

7. 当然，还有很多，应该加入js还能实现一些交互上的动画之类的变化。

注:以上所说的都是从大屏往小屏响应的变化

• 得到

  • 实战开发的大概过程

  • 之前没用过的html,css相关知识

  • 一些问题的解决办法/技巧

  • 响应式设计的知识

  • 使用现成的插件

• 总结

  • 这是一个挺好的体验,通过实战学会了响应式的设计,这是自己之前有了解,然后学习过,但是可以说几乎没有真正用页面来实现过的，这次通过实战代码的编写，更好的体现到了其中的道理。

  • 自己编写固然是好,但是有时候轮子还是得搬的。例如轮播的插件，一开始让我自己去想的话还是只会想到用css3的animation去实现，或者自己用js去写一个轮播插件(这个以后有空可以试试)。而且全部自己都自己一一去编写也太固执太没效率了。（当然这个项目还是大部分自己编写，但还是参照着成品的代码）

  • 当然，这个实战也是告诉了自己一个事实，很多的东西还是得去真的去做才知道事实是怎么样的，不然说太多的都是空谈，很多想法不去做的话到最后可能连想法都不是了。而且去做了，就更加知道自己有哪些不足的。还能在实战的过程中获得/接触更多的相关知识/经验。

  • 还是那句，获得知识最好的来源是搜索引擎，学一样技术的最好途径是官方文档。

• 附注

  • 因为是查漏补缺&巩固基础&学习开发过程&响应式的那样的目的去做的，所以注释会很多很多很多，当做笔记的那样写了。虽然是有成品,有源码,但是完全复制还是没什么意思的。所以注释也是必须的。或者影响了美观，但是还是会强迫症的看不爽那些换行不换行之类的代码。所以整体篇幅会更长。

  • 其实做这个实战的时候因为一些更重要的事情打断又打断了，但是终于，还是尽快完成了。也发现了，注释真的很重要。

  • 由于时间关系，相关的文案详细的就不再一一复制式的去写了。这个以后有机会有文案需要在续写了。这里就大概的占位符式的了。或者还能加些js进行一些交互。