如何做到响应式布局

1. 响应式工具

caniuse.com/（Web前端兼容性查看…
gs.statcounter.com/（是美国一家网站通讯流…

媒体查询：

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

viewport（移动端）： 布局视口（layout viewport） 可视视口（visual viewport） 理想视口（ideal viewport）

用户浏览器太老的情况下：ZOL浏览器下载排行榜提示此网站升级用户的浏览器

用Normalize.css代替css.resets

尽量使用em、rem，尽量不适用px（IE支持 rem有问题，主流浏览器问题不大）

清除浮动：

• HTML 的代码:

	<div class="container clearfix">
	...
	</div>

• CSS 的代码:

	.clearfix:after,
	.clearfix:before {
		content:""
		display:table;
	}
	.clearfix:after {
		clear:both;
	}

浏览器内核各不相同，会出现兼容性问题，须添加前缀，使用 autoprefixer.github.io/进行添加。

使用广告组件：OwlCarousel2 Github页面 官网首页使用滚动广告功能（需引入 jQuery[此教程是用1.x版本]） 使用方法：

• 在 HTML 的标签内添加：

	<div class="owl-carousel owl-theme">
		...
	</div>

图片响应式 JavaScript （jQuery） 代码：

$("document).ready(function) {
	fuction makeImageResponsive() {
		var width = $(widow).width();
		var img = $('.content img');
		if(width <= 480){
			img.attr('src', 'img/480.png');
		}else if(width <= 800) {
			img.attr('src', 'img/800.png');
		}else {
			img.attr('src', 'img/1600.png');
		}
	$(window).on('resize load', makeImageResponsive);
});

还有其它 API : item、loop、autoplay、nav、autoplayHoverPause

<img
	class="image"
    src="img/480.png"
    srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"
    sizes="(min-width:800px) calc(100vm - 30em), 100vw"
>
# （使用了 srcset 标签的话，则需要 sizes 填坑）

picture标签的用法：

<picture>
	<source media="(max-width:36em)"
		srcset="img/xxx.jpg 768w"/>
	<source
		srcset="img/xxx.jpg 1800w"/>
	<img class="image" src="xxx.jpg">
</picture>

创建svg图片：

• editor.method.ac/
• icomoon.io/（``svg``格式的…

**Picturefill：**scottjehl.github.io/picturefill… 使用：<script src="is/wendor/picturefill.min.js"></script>（使用picture标签）

svg压缩：

• iconizr.com/

png压缩：

• tinypng.com/

2. Node.js简介

• 下载安装Node.js

• 下载npm，npm -v可以查看npm版本。

• 例子：npm install jquery，下载jquery（q为小写）

• 创建package.json文件，使用命令：npm init创建，使用默认名称就好了，命名不能使用大写字母，其余可以自己考虑写还是不写。

• ''dependencies''是生成环境所依赖的包，''devDependencies''是开发过程所依赖的包。

• 只需要使用npm install(可简写为npm i)命令，npm就会根据package.json文件下载相应的依赖的包。

• 想要下载依赖包并且把依赖包添加到package.json里面，需要这样写npm命令：sudo npm install gulp --save(gulp将添加到''dependencies''中),若想添加到''devDependencies''文件中，则需输入sudo npm install gulp --save-dev

• 卸载包：sudo npm uninstall gulp --save，加上了--save或--save-dev则表示在''dependencies''中或''devDependencies''中删除依赖的包（本地的包也会被删除）。

• 更新包：npm update jquery（只更新jquery），npm update（更新所有包）。

• 输入npm会提示一些npm的命令。

• 想要用其它设备浏览开发好的页面：sudo npm install http-server -g安装http-server，（-g--的意思是全局安装。）

• http-server Github 页面http-server的使用：http-server scr（src为你的网站内容存储的目录。）将会生成两个远程地址，两个远程地址都是可以访问这个网站的。

• （如果是windows系统，使用IE浏览器，需要在地址前面加上http://这个协议，否则可能不能打开网站。）

• ctrl + c结束服务器。

• 假如8080端口被占用，则需要命令：http-server src -p 8888监听其它端口，启动服务器。

• http-server -help可以看到很多参数的使用方法。

3. 如何处理兼容性及在多个设备上进行调试

桌面端：

• 使用不同的浏览器测试网页，注意想用http-server开启服务器，然后用Chrom、Firefox、Opera、Safari、IE、Edge，分别打开一次，看看有没有兼容性问题。
• 如果使用的是Mac OS系统或是Linux系统，尽量使用虚拟机，安装一个Windows系统，然后使用这些虚拟机里面的环境测试这个网站。

移动端：

• 可以使用testin.cn做付费测试，一般测试app比较值，测Web就看个人了。

• 使用虚拟机，推荐使用www.genymotion.net/（有时候需要翻墙，这是…

• 使用CSS hack调试样式，推荐使用browserhacks.com/，搜索关键词，比如``…

• 想IE6-8支持HTML5，则使用shiv，使用引用就好，github页面上有写如何引入。

• 还可以使用modernizr.com/，它会检测浏览器是否支…

• 比如：你想检测浏览器是否支持svg则搜索svg，新建一个js文件，把复制的内容粘贴进去，保存好，用浏览器打开页面，在Elements窗口（此处使用的是Chrome浏览器）下，能看到一个新的类，class = "svg"，如果不支持则显示为class = "no-svg"。（其它内容请看官方文档）或使用caniuse.com（这个网站比较快解决问题）

4. 如何打包分布

• javascript-minifier.com/（压缩代码，也可以压缩…

• 推荐使用Node.js的工具，Grunt & Gulp是自动化构建工具，Webpack是静态资源打包工具。

• 此处使用Gulp，另外附上中文官网：

  • 1.安装，先初始化package，使用npm init命令初始化。
  • 2.改一下名称，其它都可以使用默认值，就会出现一个package.json文件，里面的依赖是空的。
  • 3.输入命令sudo npm install gulp --save-dev安装，安装完成后，package.json中会出现依赖包。
  • 4.使用命令gulp -v检测下是否安装成功。
  • 5.在根目录新建一个gulpfile.js文件。
  • 6.安装一些需要用到的插件，命令：sudo npm install gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso --save-dev
  • 7.示例代码：

var gulp = require('gulp');
var rev = require('gulp-rev');//给每个文件添加版本号，用户缓存新文件
var revReplace = require('gulp-rev-replace');//将index里面的引用改成新的
var useref = require('gulp-useref');//在HTML里面写一些设置类的注释，自动合并该代码
var filter = require('gulp-filter');//筛选文件-压缩文件-恢复文件（压缩文件由其它插件完成，此插件功能为分类文件和恢复文件到相应位置）
var uglify = require('gulp-uglify');//压缩js代码的插件
var csso = require('gulp-csso');//压缩css代码的插件

gulp.task('default', function() {
	//不写这个dafault参数时，则需要写确定的名称才可执行；而写了defaule则执行时默认执行这个方法。
	var jsFilter = filer('**/*.js', {restore: true});
	var cssFilter = filer('**/*.css', {restore: true});
	var indexHtmlFilter = filer(['**/*', '!**/index.html'], {restore: true});

    return gulp.src('src/index.html')
    	//拿index.html处理
		.pipe(ueseref())
		.pipe(jsFilter)
		.pipe(uglify())
		.pipe(jsFilter.restore)
		.pipe(cssFilter)
		.pipe(csso())
		.pipe(cssFilter.restore)
		.pipe(indexHtmlFilter)
		.pipe(rev())
		.pipe(indexHtmlFilter.restore)
		.pipe(revReplace())
		.pipe(gulp.dest('dist'));
});

• 8.输入命令：gulp default（default可以输入也可以不输入，因为代码里面已经写好了default，不输入default则默认执行default）。
• 9.就可以在目录中看到压缩好的文件。

使用Webpack + Gulp方案更好。

5. 流行的响应式框架简介

• Bootstrap: 英文官网：getbootstrap.com/ 中文官网：v3.bootcss.com/

• Foundation: 英文官网：foundation.zurb.com/ 中文官网：www.foundcss.com/

• Semantic UI: 英文官网：semantic-ui.com/ 中文官网：www.semantic-ui.cn/

• Pure: 英文官网：purecss.io/ 中文官网：purecss.org/

• 使用框架的缺点：

1. 体积大而重，使用起来不方便
2. 样式单调，没有创新（所以比较适合后台管理系统）

6. 原型设计和切图

1. Axure：原型设计工具，产品经理常用。
2. sketch：可做原型设计，也可做UI设计，产品经理、UI设计师常用。图片都是矢量图片。
3. 切图：Photoshop：中有切图工具（.jpg不支持透明，.gif、.png都支持透明度。图片色彩丰富的存为.jpg格式比较好。）sketch切图，点选图片后直接导出就可以了，还可以切出不一样分辨率的图。
4. 交互设计：Flinto、Principle