响应式开发

From : 慕课网-响应式开发实战

第一章 前期准备

响应式网站设计的概念

响应式网站的优点

媒体查询

媒体查询

CSS2

<link rel="stylesheet" type="text/css" href="site.css" media="screen"/>
// 屏幕显示
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
// 打印专用

CSS3

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

• width：视口宽度（可添加min-或max-前缀）
• height：视口高度
• device-width：渲染表面的宽度，就是设备屏幕的宽度
• orientation：检查设备处于横向还是纵向

viewport视口

• 布局视口（layout viewport）：浏览器渲染出来的页面的大小
• 可视视口（visual viewport）：移动浏览器能够展示的视口大小
• 理想视口（ideal viewport）：布局视口在移动设备上的最佳尺寸

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum=1.0, user-scalable=no" />
// 将布局视口设置为可视视口大小，并且禁止用户缩放页面

分析设计图

响应式网站设计实践原则

• 渐进增强（progressive enhancement）
• 优雅降级（graceful degradation）

断点

媒体查询中的临界点

/*======== iPhone 5 and 5S ========*/
@media only screen
    and (min-device-width:320px)
    and (max-device-width:568px)
    and (-webkit-min-device-pixel-ratio:2) {
    ...
}

第二章 组织项目目录结构

简述

文件夹组织

---

第七章 Node.js

Node.js

• 服务端编程
• 读写文件
• 异步

npm使用

• npm init 生成package.json文件
• npm install xxx –save 用于dependencies生产环境的的插件
• npm install xxx –save-dev 用于devDependencies开发环境的插件
• npm uninstall xxx –save 卸载某个插件
• npm update xxx 升级某个插件

Node.js http-server

安装 npm install http-server -g
启动 http-server -p 8888 启动并设置端口号

---

第八章 处理兼容性及多设备调试

桌面端调试

虚拟机

• VMWare
• Parallels Desktop
• Vitual Box

移动端

• genymotion.net 安卓模拟器

处理兼容性的方法

• CSS Hacks www.browserhacks.com 匹配各个浏览器专用CSS
• html5shiv 解决HTML5新标签
• respond 解决 min/max-width CSS3 Media Queries新特性
• modernizr 检测浏览器对HTML5/CSS3支持情况，若支持则添加相应的类，否则no-类
• Can I use

多设备测试

• browsersync 多设备自动刷新并保持同步 官网

// 启动Browsersyncbrowser-sync start --server "src" --file "src"

---

第九章 打包发布

代码优化

• 压缩
• 合并
• 增加版本号

打包工具

• Grunt 自动化构建工具
• Gulp 自动化构建工具
• Webpack 静态资源打包工具

Gulp

• npm init 初始化package.json
• npm install gulp –save-dev 安装gulp
• npm install gulp-rev 自动生成版本号，防止客户端缓存问题
• npm install gulp-rev-replace 更新改动后的文件引用
• npm install gulp-useref 注释将所包含的文件合并为一个文件
• npm install filter 过滤
• npm install uglify 压缩JS
• npm install gulp-csso 压缩CSS

---

第十章 WebStorm IDE

下载安装

官网
WebStrom破解

Emmet介绍

• 自动补全
• 嵌套（> + ^ * ()）
• 属性（# . []）
• 编号（$）和文本（{} lorem）
• CSS样式缩写

WebStorm操作

快捷键

• 设置 Ctrl+Alt+S
• 标签信息 Ctrl+Q
• 外嵌套 Ctrl+Alt+T
• 注释 Ctrl+/
• 父元素/子元素 Alt+↑/↓
• 选择剪贴板内容 Ctrl+Shift+V
• 代码折叠与展开 Ctrl-/+
• 删除整行 Ctrl+Y
• 上下移动（以标签为单位） Shift+Ctrl+↑/↓
• 上下移动（以行为单位） Shift+Alt+↑/↓
• 标签首尾 Ctrl+M
• 最近打开的文件 Ctrl+E
• 图片显示 光标+Shift
• 复制一行 Ctrl+D
• 文件/标签重命名 Shift+F6
• 逐个错误提示 F2
  -

流行的响应式框架

• Bootstrap 官网 中文
• Foundation 官网 中文
• Semantic UI 官网 中文
• PureCSS 官网 中文