首页手记响应式网页开发你不知道的那些事

响应式网页开发你不知道的那些事

标签：

Html/CSS CSS3 前端工具

简介

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

媒体查询

什么是媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

如何在CSS文件中引入媒体查询

媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面的样式。

怎样使用media

第一步：需要在html文档中添加以下代码，用来兼容移动设备的显示效果

<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响应式媒体查询

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>标签中添加以下代码。

<!--[if lt IE 9]>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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没有在根元素（html字体）指定参照值，那浏览器默认1 rem就是16px,若rem有指定值，则1rem就是等于指定值。
html设置为62.5%或者10px时会失效，是因为小于12px或者75%的字体大小不支持换算。这可能与有些浏览器不支持12px以下的大小有关。所以，使用rem单位，html的字体默认字体大小必须设置为12px或以上。若小于12px则浏览器换算时自动默认字体为12px。
```
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 下载之后的目录结构：

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结构：

<div class="ad">
   <div class="owl-carousel owl-theme">
      <div class="item">
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/ad001.png" alt="">   //  图片尺寸480*480
      </div>
      <div class="item">
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/ad002.png" alt="">
      </div>
      <div class="item">
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/ad003.png" alt="">
      </div>
   </div>
</div>

在html文件中引入css:

<link rel="stylesheet" href="OwlCarousel2/assets/owl.carousel.min.css">
<link rel="stylesheet" href="OwlCarousel2/assets/owl.theme.default.min.css">

在html文件中引入js:

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.2.1.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="OwlCarousel2/owl.carousel.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/main.js"></script>

main文件自己定义：

$(document).ready(function(){
  $(".owl-carousel").owlCarousel({
    items: 1,     // 一屏看到的图片数量
    loop: true,   // 循环滚动
    autoplay: true,   // 自动播放
    autoplayTimeout: 3000,   // 时间间隔
    autoplayHoverPause: true    //鼠标放在图片上暂停滚动
  });
});

当然现在滚动效果就已经完成了。不过还有一个问题，当屏幕尺寸放大或缩小时，始终都是480尺寸的图片，看起来就是不爽，那么如何能实现让图片在不同设备下自动切换成我们想要的尺寸呢？那么下面就需要用到响应式图片~

响应式图片

js和服务端控制

提前在图片库准备三张480、800、1600尺寸的图片。

$(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 指定给 <img> 标签所有图片源的信息。然后使用逗号分隔列出一个从小到大的图片源列表。每个图片源后可以跟w描述符或者x描述符

<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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来解决。

 <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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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）安装

$ npm install --save-dev gulp

第五步：在项目根目录下创建一个名为 gulpfile.js 的文件，并且新建一个 dist 文件夹，用于存放压缩后的文件

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插件：

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

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

<!-- 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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.2.1.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/vendor/OwlCarousel2/owl.carousel.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/vendor/picturefill.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/main.js"></script>
<!-- endbuild -->

第八步：执行gulp

$ gulp

执行gulp之后，你会在新建的 dist 文件夹中看到打包生成的文件，目录如下：

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。

总结

本篇文章包含了响应式网站开发中常见的问题及解决方案，希望对热爱前端开发的同学有所帮助，能让你们在以后的响应式开发中少走弯路。

个人博客：http://www.dpfblog.com/

项目源码：https://github.com/pengfeidai/responsive-lichaibao

点击查看更多内容