如何做到响应式布局

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

1. 响应式工具

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

http://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;
    }

  浏览器内核各不相同，会出现兼容性问题，须添加前缀，使用 https://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图片：

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

Picturefill：https://scottjehl.github.io/p...
使用：<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.示例代码：

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/
• 使用框架的缺点：
• 体积大而重，使用起来不方便
• 样式单调，没有创新（所以比较适合后台管理系统）

6. 原型设计和切图

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