响应式开发

响应式概念提出：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/