響應式網頁開發你不知道的那些事

阿新 • • 發佈：2018-12-23

簡介

原文地址：www.dpfblog.com

響應式網頁設計通過使用彈性網格和佈局、響應式圖片、CSS media query等技術手段，使頁面能夠自動切換解析度、圖片尺寸及相關指令碼功能，以適應不同裝置，來滿足使用者在各種裝置環境下的需求。響應式網頁設計就是一個網站能夠相容多個終端——而不是為每個終端做一個特定的版本。

alt text

媒體查詢

什麼是媒體查詢

媒體查詢可以讓我們根據裝置顯示器的特性（如視口寬度、螢幕比例、裝置方向：橫向或縱向）為其設定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.0625 
em) 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 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 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 指定給標籤所有圖片源的資訊。然後使用逗號分隔列出一個從小到大的圖片源列表。每個圖片源後可以跟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小圖片。完美解決圖片響應式問題，極力推薦這種方法。

打包釋出

當所有的程式碼完成之後，我們的網站就可以釋出了，在釋出之前我們還可以對程式碼進行優化：
- 壓縮
- 合併
- 增加版本號

工具打包：

Grunt：自動化構建工具
Gulp：自動化構建工具
Webpack:靜態資源打包工具

3個主流工具我就不詳細一一介紹了。這裡，主要使用 gulp 來打包釋出，首先來安裝gulp。

第一步：安裝Nodejs

保持預設設定即可，一路Next，安裝很快就結束了。

然後開啟命令提示符，輸入 node -v、npm -v，出現版本號則說明 Node.js 環境配置成功，第一步完成！！！

第二步：安裝Git

安裝完成後，桌面右鍵，開啟 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。

總結

本篇文章包含了響應式網站開發中常見的問題及解決方案，希望對熱愛前端開發的同學有所幫助，能讓你們在以後的響應式開發中少走彎路。

響應式網頁開發你不知道的那些事

簡介

媒體查詢

什麼是媒體查詢

如何在CSS檔案中引入媒體查詢

怎樣使用media

相容性解決

相對長度單位

響應式廣告

響應式圖片

js和服務端控制

srcset屬性

picture屬性

打包釋出

總結

響應式網頁開發你不知道的那些事

軟體設計，那些你不知道的事

響應式網頁開發的基本規則

三分鐘幫你整合極光推送——和那些可能你不知道的事

<轉>about持續集成，你不知道的事

CSS浮動，你不知道的事

網際網路社交20年，多的是你不知道的事！

關於RxJava2.0你不知道的事

HTML的頭部資訊裡你不知道的事

你不知道的事---------printf輸出指定長度字串

不簡單的周會與周報，這是你不知道的事

子字串查詢之————關於KMP演算法你不知道的事

Dubbo Cluster叢集那點你不知道的事。

你不知道的事---SringCloud的feign的繼承特性

正則表達式之你不知道的replace

翻譯連載 | 附錄 A：Transducing（上）－《JavaScript輕量級函數式編程》 |《你不知道的JS》姊妹篇

翻譯連載 | 附錄 C：函數式編程函數庫－《JavaScript輕量級函數式編程》 |《你不知道的JS》姊妹篇

那些你不知道的PS大片攝影

阿裏，京東，淘寶，美團，那些你不知道的事兒

阿里資料庫十年變遷，那些你不知道的二三事

響應式網頁開發你不知道的那些事

簡介

媒體查詢

什麼是媒體查詢

如何在CSS檔案中引入媒體查詢

怎樣使用media

相容性解決

相對長度單位

響應式廣告

響應式圖片

js和服務端控制

srcset屬性

picture屬性

打包釋出

總結

相關推薦