响应式网站设计

优点

• 减少工作量
• 节省时间
• 每个设备都能得到正确的设计
• 搜索优化

缺点

• 加载更多的样式和脚本资源
• 设计比较难精确定位和控制
• 老版本浏览器兼容性不好

---

媒体查询

** css3 **

@media all and (min-width:800px) and (orientation:landscape){
    ...
 } ```

> and 
> or 
> not 
> only(不支持老浏览器时使用) 

### 最常用的属性
- width 视口宽带
- height 视口高度
- device-width 设备屏幕的宽度
- device-height 设备屏幕的高度

***

# viewpoint视口

```

---

网站开发前的工作

1.需求调研
2.UI设计、评审
3.原型设计

** 怎么分析设计图 **

• 和设计师交流网站如何交互
• 是否有相应的设计规范（字体 颜色 字号 间距等）
• 什么地方必须100%还原？什么地方可以灵活处理？
  ** 分析设计图步骤 **
  1.分析结构
• 什么地方可以变？什么地方不变?
• 拆分结构
  2.分析布局
• 用什么元素？
  3.切图

---

响应式网站设计实践原则

• 渐进增强

• 优雅降级（流行）

• 小屏幕

• 大屏幕（按照用户数量）

** 浏览器 **

• pc
  1.chrome
  2.火狐
  3.ie
• 移动端
  1.系统自带
  2.ios浏览器
  3.qq浏览器
  4.uc
  5.360

** 断点的选择 **（按照设计师）
0-480 小屏幕
480-800 中屏幕
801-1400 大屏幕
1400+ 巨屏幕

---

---

如何组织项目目录结构

• 约定优于配置
• 约定代码结构或命名规范来减少配置数量
• 没有最好的组织方式，只有最合适的

Paste_Image.png

JBZ4FZ$GSL1[2%P]RQJY`H4.png

比特虫 在线制作favicon.ico图标(网站的logo)
humans.txt 开发人员信息，格式

---

编写html代码

Paste_Image.png

Paste_Image.png

---

编写css代码

**使用normalize.css 重置样式

css单位

• px 像素
• em 相对的长度单位
  1.em相对参照物为父元素的font-size
  2.em具有继承的特点
  3.当没有设置font-size时，浏览器会有一个默认的em设置：1em=16px
  缺点：容易混乱
• rem
  1.rem的相对参照物为根元素的html，相对于参照物固定不变，所以比较好计算
  2.当html没有设置font-size时，浏览器会有一个默认的rem设置：1rem=16px，这点和em是一致的
  缺点：ie8 以下不支持，可以在rem前再设置一个font-size

font-size:100% 1rem=16px
font-size:62.5% 1rem=10px (10/16*100%)

CanIUse 检查兼容性
autoprefixer 自动给css添加兼容性前缀

---

实现轮播图特效

Paste_Image.png

Paste_Image.png

owlcarousel owlcarousel轮播插件

---

响应式图片

• js或服务端

  
  
  

  Paste_Image.png

• srcset
  

  

  Paste_Image.png
  
  坑：要配合sizes属性，默认sizes是100vw（容器宽度要和sizes一样大，才能准确显示图片大小）
  
  

  Paste_Image.png

• srcset配合sizes

Paste_Image.png

• picture(兼容性 ie 老版本浏览器都不支持，不过可以用polyfill【腻子】)

Paste_Image.png

Paste_Image.png

判断是否支持webp格式的图片

picturefill
picturefill

• svg（兼容性好）
  缺点：色彩不丰富，只能用于颜色单一的小图标

editor.method
iconMoon
在线创建svg图形

压缩图片
压缩图片

---

---

Node.js

服务器端也可以运行js代码

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 (回调函数、异步执行)
Node.js 的包管理器 npm，是全球最大的开源库生态系统。

• npm install jquery (安装命令、包名用小写的)
• npm init (package.json 依赖信息、团队统一)
• npm install（根据package.json安装）
  1.npm i (简写)
  2.npm install -g(全局安装)
  3.npm install xxx --save（更新生产环境依赖）
  4.npm install xxx --save -dev（更新开发环境依赖）
• npm uninstall xxx（卸载）
• npm updata xxx（更新）

node.js轻量级服务器

http-server
http-server

---

---

如何处理兼容性

• ie(虚拟机)

• chrome

• 火狐

• safiry

• 安卓

• 苹果
  1.虚拟机（genymotion安卓虚拟器）
  2.真机

css兼容性解决方案

• hack
  1.browserhack.com 可以看到各种hack的写法
• pollyfill
• shiv
  1.html5shiv(html5标签) https://github.com/aFarkas/html5shiv
  2 Respond(媒体查询) https://github.com/scottjehl/Respond

• modernizr.com
  1.一个库、可以自定义
  2.用于检测css3、html5的兼容性
  3.主动式兼容、防御式兼容
  4.html标签上会自动添加类

  
  
  

  Paste_Image.png
• caniuse.com

---

在多个设备上进行测试

www.browsersync.com

Paste_Image.png

---

---

打包发布

在发布之前的代码优化

1.压缩（手动的网站）
2.合并
3.增加版本号

node.js 自动打包工具

1.Grunt--自动化构建工具
2.Glup--自动化构建工具（推荐）

Paste_Image.png

3.Webpack --静态资源打包工具