响应式布局笔记

封面图片

本笔记内容来自慕课网实战教程响应式开发一招致胜

1. 响应式工具

https://caniuse.com/（Web前端兼容性查看网站）

http://gs.statcounter.com/（是美国一家网站通讯流量监测机构，提供各种类型的统计报告以及网站流量统计服务）

媒体查询：

1
2
3

	@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 的代码:

  1 2 3

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

• CSS 的代码:

  1 2 3 4 5 6 7 8

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

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

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

• 在 HTML 的标签内添加：

  1 2 3

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

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

  1 2 3 4 5 6 7 8 9 10 11 12 13

  $("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*

1
2
3
4
5
6
7

<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标签的用法：

1
2
3
4
5
6
7

<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图片：

• http://editor.method.ac/
• https://icomoon.io/（``svg``格式的图片兼容性更好，彩色图用``png``、``jpg``比较好）

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

svg压缩：

• http://iconizr.com/

png压缩：

• https://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就看个人了。

• 使用虚拟机，推荐使用http://www.genymotion.net/（有时候需要翻墙，这是安卓虚拟机）。苹果最好就是用自己的或者朋友的真机了。

• 使用CSS hack调试样式，推荐使用http://browserhacks.com/，搜索关键词，比如``ie7``就会提示一些``ie7``支持的样式写法。

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

• 还可以使用https://modernizr.com/，它会检测浏览器是否支持CSS3、HTML5等，如果支持，就会向HTML元素添加某一个类。如果不支持，就会增加一个no开头的同一个类。使用：考虑你想测试什么，到Download页面复制，

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

4. 如何打包分布

• https://javascript-minifier.com/（压缩代码，也可以压缩css、图片），但是每次压缩都要手动，比较麻烦。

• 推荐使用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.示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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: 英文官网：https://getbootstrap.com/ 中文官网：http://v3.bootcss.com/

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

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

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

• 使用框架的缺点：

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

6. 原型设计和切图

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

Sanzro Info 公众号二维码

请我喝杯咖啡吧🙏