响应式开发你不知道的那些事
简介响应式网页设计通过使用弹性网格和布局、响应式图片、CSS media query等技术手段，使页面能够自动切换分辨率、图片尺寸及相关脚本功能，以适应不同设备，来满足用户在各种设备环境下的需求。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。http://img.sc.chinaz.com/upload/2014/11/21/2014112117164334.gif
image
媒体查询什么是媒体查询媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。如何在CSS文件中引入媒体查询媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面的样式。怎样使用media第一步：需要在html文档中添加以下代码，用来兼容移动设备的显示效果
1
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
[*]width=device-width:宽度等于当前设备的宽度
[*]initial-scale=1：初始的缩放比例（默认为1）
[*]minimum-scale=1：允许用户缩放到得最小比例（默认为1）
[*]maximum-scale=1：允许用户缩放到得最大比例（默认为1）
[*]user-scalable=no：用户不能手动缩放
第二步：怎样在CSS文件中写CSS响应式媒体查询
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
body {
font-size: 1.6rem;
background: #f7f7f7;
}
@media only screen and (max-width: 50em) {
body {
font-size: 1.2rem;
background: #fff;
}
}
@media only screen and (min-width: 30.0625em) and (max-width:50em){
}
@media only screen and (max-width: 30em) {
body {
font-size: 1.0rem;
background: #999;
}
}
[*]在不同宽度下，改变背景颜色和字体大小
兼容性解决部分IE浏览器(IE9以下)，不支持 html5 和媒体查询。需要在 html 文档 <head></head>标签中添加以下代码。
1
2
3
4
<!-->
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<!-->
html5shiv：解决IE浏览器(IE6、IE7、IE8)不支持HTML5的问题
respond：使IE浏览器(IE6、IE7、IE8)支持媒体查询中的min-width和max-width相对长度单位px: 像素，1个px相当于一个像素em: 元素字体高度，相对参照物为父元素的 font-size。em 的值并不固定，会继承父元素的字体大小rem: 元素字体高度，相对参照物为根元素 html,相于参照固定不变。目前，除 IE9 以下版本，所有浏览器均已支持rem注意：
[*]若rem没有在根元素（html字体）指定参照值，那浏览器默认1 rem就是16px,若rem有指定值，则1rem就是等于指定值 。
[*]html设置为62.5%或者10px时会失效，是因为小于12px或者75%的字体大小不支持换算。这可能与有些浏览器不支持12px以下的大小有关。所以，使用rem单位，html的字体默认字体大小必须设置为12px或以上。若小于12px则浏览器换算时自动默认字体为12px。
1
2
3
4
5
6
html {
font-size: 62.5%; /* 10÷16=62.5% */
}
body {
font-size:1.2rem ;/* 12÷10=1.2 */
}
在响应式网页开发中，我们会更多的使用到 rem，而对 px的适应基本很少。响应式广告现在大部分的网页都会有一个滚动广告(轮播图)，一个好的广告滚动组件支持：
[*]支持不同的图片数量
[*]支持响应式
[*]具有良好的兼容性
现在网上滚动广告组件非常多，在这里我只推荐两种 Owl Carousel 2和 myfocus，非常轻量，使用文档非常齐全。这里，主要讲一下 Owl Carousel 2的用法。Owl Carousel 2 下载之后的目录结构：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Owlcarousel2/
├── assets/
│ ├── owl.carousel.css
│ ├── owl.carousel.min.css // 主样式文件
│ ├── owl.theme.default.css
│ ├── owl.theme.default.min.css// 皮肤样式文件
│ ├── owl.theme.green.css
│ ├── owl.theme.green.min.css
│ └── owl.video.play.png
│
├── owl.carousel.js
├── owl.carousel.min.js
├── LICENSE-MIT
└── README.md
html结构：
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="ad">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="img/ad001.png" alt=""> //图片尺寸480*480
</div>
<div class="item">
<img src="img/ad002.png" alt="">
</div>
<div class="item">
<img src="img/ad003.png" alt="">
</div>
</div>
</div>
在html文件中引入css:
1
2
<link rel="stylesheet" href="OwlCarousel2/assets/owl.carousel.min.css">
<link rel="stylesheet" href="OwlCarousel2/assets/owl.theme.default.min.css">
在html文件中引入js:
1
2
3
<script src="js/jquery-3.2.1.min.js"></script>
<script src="OwlCarousel2/owl.carousel.min.js"></script>
<script src="js/main.js"></script>
main文件自己定义：
1
2
3
4
5
6
7
8
9
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
items: 1, // 一屏看到的图片数量
loop: true, // 循环滚动
autoplay: true, // 自动播放
autoplayTimeout: 3000, // 时间间隔
autoplayHoverPause: true //鼠标放在图片上暂停滚动
});
});
当然现在滚动效果就已经完成了。不过还有一个问题，当屏幕尺寸放大或缩小时，始终都是480尺寸的图片，看起来就是不爽，那么如何能实现让图片在不同设备下自动切换成我们想要的尺寸呢？那么下面就需要用到响应式图片~响应式图片js和服务端控制提前在图片库准备三张480、800、1600尺寸的图片。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){
function makeImageResponsive(){
var img = $('.cotent img');
var width = $(window).width();
if(width <= 480){
img.attr('src', '480.png');
}else if(width <= 800){
img.attr('src', '800.png');
}else{
img.attr('src', '1600.png');
}
}
$(window).on('resize load', makeImageResponsive);
})
srcset属性通过 srcset 指定给标签所有图片源的信息。然后使用逗号分隔列出一个从小到大的图片源列表。每个图片源后可以跟w描述符或者x描述符
1
<img src="img/480.png" srcset="img/480.png 480w,img/800.png 800w, img/1600.png 1600w alt="">
如果浏览器支持 srcset 则会根据屏幕宽度采用最佳的图片，否则直接下载 src 属性内的图像。picture属性picture是html5新属性，可以放置多个source标签，以指定不同的图像文件名，进而根据不同的条件进行加载。
由于现在很多浏览器对于picture这个标签还不支持，所以我们需要引用picturefill.js来解决。
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
<div class="owl-carousel owl-theme">
<div class="item">
<picture>
<source srcset="img/ad001-l.png" media="(min-width: 50em)">
<source srcset="img/ad001-m.png" media="(min-width: 30em)">
<img srcset="img/ad001.png" alt="">
</picture>
</div>
<div class="item">
<picture>
<source srcset="img/ad002-l.png" media="(min-width: 50em)">
<source srcset="img/ad002-m.png" media="(min-width: 30em)">
<img srcset="img/ad002.png" alt="">
</picture>
</div>
<div class="item">
<picture>
<source srcset="img/ad003-l.png" media="(min-width: 50em)">
<source srcset="img/ad003-m.png" media="(min-width: 30em)">
<img srcset="img/ad003.png" alt="">
</picture>
</div>
</div>
<!-- 在 body 末尾引入-->
<script src="js/vendor/picturefill.min.js"></script>
在大于800px的时候，展示ad00x-l这个large图片。在大于480px的时候，展示ad00x-m这个medium图片。否则，展示ad00x小图片。完美解决图片响应式问题，极力推荐这种方法。打包发布当所有的代码完成之后，我们的网站就可以发布了，在发布之前我们还可以对代码进行优化：
[*]压缩
[*]合并
[*]增加版本号
在线压缩:(https://javascript-minifier.com/)工具打包：
[*]Grunt：自动化构建工具
[*]Gulp：自动化构建工具
[*]Webpack:静态资源打包工具
3个主流工具我就不详细一 一介绍了。这里，主要使用 gulp 来打包发布，首先来安装gulp。第一步：安装Nodejs在 Node.js 官网：https://nodejs.org/en/ 下载安装包保持默认设置即可，一路Next，安装很快就结束了。然后打开命令提示符，输入 node -v、npm -v，出现版本号则说明 Node.js 环境配置成功，第一步完成！！！第二步：安装Git在 Git 官网：https://git-scm.com/ 下载安装包安装完成后，桌面右键，打开 Git Bush Here，输入 git --version，出现版本号则说明 Git 环境配置成功，第二步完成！！！第三步：安装Gulp(全局)桌面右键，打开 Git Bush Here，输入npm install gulp -g安装完成后，同样输入 gulp -v，出现版本号则说明，则说明安装成功。第四步：作为项目的开发依赖（devDependencies）安装
1
$ npm install --save-dev gulp
第五步：在项目根目录下创建一个名为 gulpfile.js 的文件，并且新建一个 dist 文件夹，用于存放压缩后的文件
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
var gulp = require('gulp');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var useref = require('gulp-useref');
var filter = require('gulp-filter');
var uglify = require('gulp-uglify');
var csso = require('gulp-csso');
gulp.task('default', function() {
var jsFilter = filter('**/*.js', {restore: true});
var cssFilter = filter('**/*.css', {restore: true});
var indexHtmlFilter = filter(['**/*', '!**/index.html'], {restore: true});
return gulp.src('src/index.html')
.pipe(useref())
.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'));
});
第六步：安装以上需要的gulp插件：
1
$ npm install gulp gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-filter gulp-uglifygulp-csso --save-dev
第七步：将 htlm 中需要打包合并的文件添加注释
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- build:css css/combined.css -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="js/vendor/OwlCarousel2/assets/owl.carousel.min.css">
<link rel="stylesheet" href="js/vendor/OwlCarousel2/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->
<!-- build:js js/combined.js -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/vendor/OwlCarousel2/owl.carousel.min.js"></script>
<script src="js/vendor/picturefill.min.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
第八步：执行gulp
1
$ gulp
执行gulp之后，你会在新建的 dist 文件夹中看到打包生成的文件，目录如下：
1
2
3
4
5
6
7
8
dist/
├── css/
│ ├──combined-3f8e363e08.css //打包合并后的css文件
│ └──combined-56ca943019.css
├── img/
├── js/
│ └── combined-7762fa2c22.js //打包合并后的js文件
└── index.html
这时候 css, js 文件都被压缩合并成了一个文件，看起来更加轻量。如果你修改了源代码中的内容，只需再次执行gulp ，则会生成另一个心得css或js文件，版本号会更新，不会覆盖之前的文件。如上面生成新的 combined-56ca943019.css 文件，也保留之前的 combined-3f8e363e08.css。总结本篇文章包含了响应式网站开发中常见的问题及解决方案，希望对热爱前端开发的同学有所帮助，能让你们在以后的响应式开发中少走弯路。项目源码：https://github.com/pengfeidai/responsive-lichaibao
页:
[1]