吾爱编程

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

作者: 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">

第二步:怎样在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
<!--[if lt IE 9]>
    <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>
<![endif]-->

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,而对 px的适应基本很少。
响应式广告
现在大部分的网页都会有一个滚动广告(轮播图),一个好的广告滚动组件支持:
现在网上滚动广告组件非常多,在这里我只推荐两种 Owl Carousel 2myfocus,非常轻量,使用文档非常齐全。这里,主要讲一下 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/)
工具打包:
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-uglify  gulp-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






欢迎光临 吾爱编程 (http://www.52pg.net/) Powered by Discuz! X3.2