继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

没事放放牛
关注TA
已关注
手记 5
粉丝 19
获赞 201
简介

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

alt

媒体查询

什么是媒体查询

媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定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 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

注意:

  1. 若rem没有在根元素(html字体)指定参照值,那浏览器默认1 rem就是16px,若rem有指定值,则1rem就是等于指定值 。
  2. 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的适应基本很少。

响应式广告

现在大部分的网页都会有一个滚动广告(轮播图),一个好的广告滚动组件支持:

  1. 支持不同的图片数量
  2. 支持响应式
  3. 具有良好的兼容性

现在网上滚动广告组件非常多,在这里我只推荐两种 Owl Carousel 2myfocus,非常轻量,使用文档非常齐全。这里,主要讲一下 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 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:

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

在html文件中引入js:

<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文件自己定义:

$(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 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来解决。

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

$ 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

打开App,阅读手记
3人推荐
发表评论
随时随地看视频慕课网APP