吾爱编程

标题: 响应式开发你不知道的那些事 [打印本页]

作者: admin 时间: 2018-6-3 20:54
标题: 响应式开发你不知道的那些事
简介

响应式网页设计通过使用弹性网格和布局、响应式图片、CSS media query等技术手段，使页面能够自动切换分辨率、图片尺寸及相关脚本功能，以适应不同设备，来满足用户在各种设备环境下的需求。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

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

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

在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

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

在大于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

第六步：安装以上需要的gulp插件：

1	$ npm install gulp gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-filter gulp-uglify gulp-csso --save-dev

第七步：将 htlm 中需要打包合并的文件添加注释

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

<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">



<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>

第八步：执行gulp

$ 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

欢迎光临吾爱编程 (http://www.52pg.net/)