响应式概念提出：http://alistapart.com/article/responsive-web-design
浏览器全球占比统计 http://caniuse.com/
浏览器全球占比统计 http://gs.statcounter.com/
响应式网站概念总结 flexible grid layout flexible image media queries
响应式网站是一个设计理念，他是多向技术的综合体
媒体查询 注意
@media not screen and(color),print and (color) 等价与
@media not screen and (color) or print and (color) 等价于
@media (not(screen and (color))),print and (color)
viewprot 视口
布局视口（layout viewport）
可视视口 （visual viewport）
理想视口 （ideal viewport）
理想视口就是为构建手机浏览器优化页面而添加的
/网站开发前的工作/
网站开发前的工作（需求调研 UI设计 评审 原型设计）
为什么要做这个网站 ？需要解决什么为题？网站的受众有哪些？
页面内容如何呈现？ 网站内容应该如何组织？
/怎么分析设计图/
和设计师交流网站如何交互 是否有相应的设计规范（字体 颜色 字号 ）
什么地方必须100%还原什么地方可以灵活处理
/讲师建议/
公司前端设计师，要具有前端开发的功底
同样前端开发，要有一定的设计的能力
便于前端设计与前段开发沟通
/**/
分析结构 分析布局 切图
/响应式网站设计实践原则/
progressive enhancement 渐进增强
graceful degradation 优雅降级
先设计大屏幕还是小屏幕 与喜欢和网站性质有关， 没有对错，只有合适
确定支持的浏览器 Chrome 占比高
不管设备大小 应该包括相同的内容
根据设备大小不同 显示不同的内容
/* 断点的选择*/
0-480 小屏幕
481-800 中屏幕
801-1400 大屏幕
1400+ 巨屏幕
/ 如何组织项目目录结构 /
约定优于配置（convention over configuration）
预定代码结构或明明规范来减少配置数量
没有最好的组织方式，只有最合适
/有用的文件/
robots.txt favicon.ico humans.txt
生成icon 图片的网站 www.bitbug.net（一般使用logo）
HumansTXT 书写规范：http://www.humanstxt.org.cn/
.editorconfig 网站 http://editorconfig.org/
gitignore
/ 第三章 /
更新浏览器地址 ：http://browsehappy.com/
属性选择器
E[attr]
E[attr=”value”]
E[attr^=”value”]
E[attr$=”value”]
E[attr*=”value”]
E[attr~=”value”]
E[attr|=”value”]
伪类和伪元素选择器
:like,:visited,:hover,:active,:focus
:enabled,:disabled,:checked
:first-child
:last-child
:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()
:first-of-type
:last-of-type
:only-hcild
:only-of-type
:empty
:not()
:first-line.:first-letter,:befor,:after
/怎么挑选第三方的组件/
使用人数
是否开源
文档是否齐全
活跃性
小巧够用的组件
http://www.owlcarousel.owlgraphic.com/
响应式图片
图片的排版和布局
根据设备大小加载不同的图片
js或服务端
srcset
srcset配合sizes
picture
svg
在线创建svg图片 editor.method.ac
在线图片压缩 iconizr.com
在线png压缩 tinypng.com
<source media = "(min-width:50em)" srcset="img/ad001-1.png"/> <source media = "(min-width:30em)" srcset="img/ad001-m-s.png"/> <img src="img/ad001.png" alt="2016年度报告"> </picture>/ 在npm使用 /
在使用npm安装包的过程中统一使用小写 包的名称
配置包的文件是 package.json 命令生成 npm init 提示进行配置即可
“jquery”: “^3.1.1” ^ 表示 大于后面的版本号 并且版本号要一致
安装命令 npm install -g gulp –save
卸载命令 npm install -g gulp –save
更新命令 npm update jquery
更新全部 npm update
/ 如何处理兼容性 /
opera Developer 版浏览器自带翻墙功能
http://www.opera.com/blogs/desktop/2016/07/opera-developer-40-0-2296-0-update/
www.umindex.com
安卓虚拟机 http://www.genymotion.net/
浏览器hack问题 http://browserhacks.com/
处理兼容：https://github.com/aFarkas/html5shiv
处理兼容响应式 ：https://github.com/scottjehl/Respond
js处理兼容 ： https://modernize.com/
/ 打包发布 /
在发布之前还可以做代码优化
压缩
合并
增加版本号
手动打包发布压缩文件 ：http://javascript-minifier.com/
打包主流的三个工具
Grunt 自动化构建工具
Gulp 自动化构建工具
Webpack 静态资源的打包工具
安装命令 npm install gulp –save-dev
/ 选择一个趁手额IDE /
Emmet 根据官网可以学习更多
市面上比较流行的响应式框架
Bootstrap
Foundation
Semantic UI
PureCSS
使用后台的管理系统
care 在意
/* 聊聊原型设计和切图 ***/
原型设计和切图
线框图
原型设计 Mockup
原型设计 产品经理用的比较多 http://www.axure.com/
原型设计使用苹果系统 Sketch
交互设计 https://www.flinto.com/
交互设计 http://principleformac.com/
