移動端開發知識點2

1. 自適應佈局(BFC觸發)

左側固定右側自適應：

  .left {
            width: 200px;
            height: 200px;
            background-color: green;
            float: left;
        }

        .right {
            height: 300px;           
            background-color: red;    
            overflow: hidden;    
            /* 當給元素設置了overflow:hidden ,此時元素會構造BFC, 觸發了BFC的元素 不會和浮動元素有交集 */
        }


<div class="left"></div>
<div class="right"></div>

右側固定左側自適應：

 .left {
            width: 200px;
            height: 200px;
            background-color: green;
            float: right;
        }

 .right {
            height: 300px;           
            background-color: red;    
            overflow: hidden;              
            /* 當給元素設置了overflow:hidden ,此時元素會構造BFC, 觸發了BFC的元素 不會和浮動元素有交集 */
        }


<div class="left"></div>
<div class="right"></div>

兩側固定中間自適應：

.left,
.right {
            width: 200px;
            height: 200px;
            background-color: green;
        }
.left {
            float: left;
        }
.right {
            float: right;
        }

.center {
            height: 300px;
            background-color: red;
            overflow: hidden; /* 觸發BFC*/
        }

 <div class="left"></div>
 <div class="right"></div>
 <div class="center"></div>

2. touch事件

移動端新增了4個與手指觸摸相關的事件。

//touchstart:手指放到屏幕上時觸發
//touchmove:手指在屏幕上滑動式觸發（會觸發多次）
//touchend:手指離開屏幕時觸發
//touchcancel:系統取消touch事件的時候觸發,比如電話

每個觸摸事件被觸發後，會生成一個event對象，event對象中changedTouches會記錄手指滑動的信息。

e.touches;//當前屏幕上的手指
e.targetTouches;//當前dom元素上的手指。
e.changedTouches;//觸摸時發生改變的手指。

這些列表裏的每次觸摸由touch對象組成，touch對象裏包含着觸摸信息，主要屬性如下 :

clientX / clientY: //觸摸點相對瀏覽器窗口的位置
pageX / pageY:     //觸摸點相對於頁面的位置

<script>
        var box = document.querySelector('.box');
        //綁定touch事件
        //定義變量記錄觸屏數據
        var  startX = 0; //記錄手指接觸時座標值
        var  moveX = 0; //記錄手指當前移動座標值
        var  distancX = 0; //記錄當前手指位置 和 起始位置差值

        box.addEventListener('touchstart', function (e) {
            console.log('start');                      
            startX = e.targetTouches[0].clientX;
            // console.log(startX); 
        })

        box.addEventListener('touchmove', function (e) {
            console.log('move');
            //觸屏移動式獲取當前手指移動距離
            moveX = e.targetTouches[0].clientX; 
            // console.log(moveX);
            //計算距離差值
            distancX = moveX - startX;
            // console.log(distancX);
        })

        box.addEventListener('touchend', function (e) {
            console.log('end');
            //觸屏結束是判斷 用戶滑動方向 
            if (distancX > 0) {
                console.log('右滑動');
            }

            if(distancX < 0) {
                console.log('左滑動');
            }
             //數據重置 
             startX = 0; 
             moveX = 0; 
             distancX = 0; 
        })
</script>

在移動觸屏之後，會優先觸發touch事件， 在300ms之後會觸發click事件，在移動點擊事件會有性能問題；

優化：

      在touch事件中出去點擊是邏輯， 需要判斷用戶的行爲是點擊事件才行；

      touch中判斷是點擊事件條件：  

觸屏過程中， 手指沒有在屏幕上移動；觸屏的時間比較  至小>150ms

3. 關於tap事件與click事件

1）click事件在pc端非常用，但是在移動端會有300ms左右的延遲，比較影響用戶的體驗，300ms用於判斷雙擊還是長按事件，只有當沒有後續的的動作發生時，纔會觸發click事件；

2）tap事件只要輕觸了，就會觸發，體驗更好。

/*
 * 由於移動端的點擊事件click 有300左右的延遲， 用戶體驗有待提升
 *  希望 能用touch事件封裝一個相應速度更快的 點擊事件 tap
 *
 *   touch判斷爲點擊事件的條件：
 *
 *   1、觸屏開始 到觸屏結束  手指沒有移動
 *   2、接觸屏幕的時間 小於指定的值 150ms *
 *
 *   滿足以上兩個條件 可以認爲是點擊事件觸發了
 * */

/*
*  插件功能：
*   給指定的元素 綁定優化後的移動的點擊事件--- tap事件
*   參數：
*   obj:要綁定優化後點擊事件的元素
*   callback: 當點擊事件觸發 執行什麼操作
* */

var itcast={
    tap:function(obj,callback){
        if(typeof obj=='object'){ //判斷傳入的obj是否爲對象

            var startTime=0;//記錄起始事件
            var isMove=false; //記錄是否移動

            obj.addEventListener('touchstart',function(){
                startTime=Date.now(); //獲取當前時間戳
            });

            obj.addEventListener('touchmove',function(){
               isMove=true; //記錄移動

            });

            obj.addEventListener('touchend',function(e){
                //判斷是否滿足點擊的條件
                if(!isMove&&Date.now()-startTime<150){
                    //tap點擊事件觸發
                    //if(callback){
                    //    callback();
                    //}
                    callback&&callback(e);
                }

                //數據重置
                isMove=false;
                startTime=0;
            });
        }
    }
}

4. zepto框架介紹

Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript庫， 它與jquery有着類似的api。 如果你會用jquery，那麼你也會用zepto。

github地址 (https://github.com/madrobby/zepto )

中文文檔 (http://www.css88.com/doc/zeptojs_api/ )

zepto與jquery的區別

• jquery針對pc端，主要用於解決瀏覽器兼容性問題，zepto主要針對移動端。

• zepto比jquery輕量，文件體積更小

• zepto封裝了一些移動端的手勢事件

zepto的基本使用

zepto的使用與jquery基本一致，zepto是分模塊的，需要某個功能，就需要引入某個zepto的文件。

<script src="zepto/zepto.js"></script>
<script src="zepto/event.js"></script>
<script src="zepto/fx.js"></script>
<script>
  $(function () {
    $(".box").addClass("demo");

    $("button").on("click", function () {
      $(".box").animate({width:500}, 1000);
    });
  });
</script>

zepto手勢事件

 zepto中根據touchstart touchmove touchend封裝了一些常用的手勢事件

tap     // 輕觸事件,用於替代移動端的click事件，因爲click事件在老版本中會有300ms的延遲
	    //穿透的問題    fastclick:
swipe  //手指滑動時觸發
swipeLeft    //左滑
swipeRight   //右滑
swipeUp      //上滑
swipeDown    //下滑

 

5. 響應式頁面

什麼是響應式佈局？

響應式佈局（respond layout）是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端（手機、平板、pc電腦、手錶，電視） ——而不是爲每個終端做一個特定的版本。這個概念是爲解決移動互聯網瀏覽而誕生的。

爲什麼要有響應式佈局？

• 在移動互聯日益成熟的時候，在PC端開發的網頁已經無法滿足移動設備的要求。

• 通常的做法是針對移動端單獨做一套特定的版本。

• 如果終端越來越多，那麼需要開發的版本就會越來越多（大屏設備的普及）

• 響應式佈局 ：一個網站能夠兼容多個終端（節約開發成本）

優點：

面對不同分辨率設備靈活性強

能夠快捷解決多設備顯示適應問題

缺點：

兼容各種設備工作量大，效率低下

代碼累贅，會出現隱藏無用的元素，加載時間加長

其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果

一定程度上改變了網站原有的佈局結構，會出現用戶混淆的情況

響應式開發現狀：

• 如果已經存在PC的網站了，那麼一般不會使用響應式開發，而是針對移動端再開發一套系統（比如京東、淘寶）

• 在新建站點 上採用響應式開發的越來越多。

• 在國內，響應式開發還不是特別的流行。但響應式開發是大勢所趨，會越來越流行。

響應式開發與移動web開發的比較

開發方式	移動web開發+pc開發	響應式開發
引用場景	一般已經有了PC端網站，只需要端獨開發移動端網站即可	針對一些新建網站，並且要求適配移動端
開發	針對性強，開發效率高	兼容各種終端，效率低
適配	只能適配移動端或者PC端，pad上體驗比較差	可以適配各種終端
效率	代碼簡潔，加載快	代碼相對複雜，加載慢

響應式 ：一個頁面，可以在任何設備上進行完美佈局；
               要求網頁能檢測設備屏幕--> 寬高 --> 寬（最主要的就是寬）

如何動態檢測當前設備屏幕寬度：
        1-可以用js動態獲取 
        2-css3中新增 媒體查詢技術
媒體查詢技術作用： 可以動態檢測當前設備寬度，根據不同設備寬度給盒子加載不同樣式

6. 媒體查詢

媒體查詢（Media Query）是CSS提出來的一個新的屬性，通過媒體查詢可以查詢到screen的寬度，從而指定某個寬度區間的網頁佈局。

設備分類

分類	寬度範圍
大屏設備	>1200px
中屏設備	992px~1200px
小屏設備	768px~992px
超小屏設備	< 768px

媒體查詢的使用

需求：響應式開發的原理：使用媒體查詢實現不同終端的佈局和樣式的切換。

<!--
需求：
    大屏設備(>1200px)   版心：1170px   背景色：紅色
    中屏設備(992-1200)  版心：970px    背景色：藍色
    小屏設備(768-992)   版心：750px    背景色：黃色
    超小屏設備(<768px)  版心：100%     背景色：綠色
-->

媒體查詢語法：

/*查詢屏幕*/
@media screen and 條件 {
}

/*條件的寫法*/
/*min-width:只要屏幕寬度超過這個值的設備樣式就能生效*/
/*max-width:只要屏幕寬度小於這個值的設備樣式就能生效*/
@media screen and (min-width: 1200px) {
  .container {
    width: 1170px;
    background-color: red;
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  .container {
    width: 970px;
    background-color: blue;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .container {
    width: 750px;
    background-color: yellow;
  }
}

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    background-color: green;
  }
}

弊端：現在只有一個div，要做一套響應式佈局，就需要如此多的代碼，非常的麻煩，因此我們會更多的藉助一些響應式的框架，比如bootstrap。

7. bootstrap框架

bootstrap中文網 (http://www.bootcss.com/ )

寫原生的響應佈局會很繁瑣，實際工作中使用bootstrap框架 ---> 柵格系統 

Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。

特點：

• 組件簡潔大方、代碼規範精簡、界面自定義性強。

• Bootstrap是基於HTML5和CSS3開發的，它在jQuery的基礎上進行了更爲個性化和人性化的完善，形成一套自己獨有的網站風格，併兼容大部分jQuery插件。

• Bootstrap中包含了豐富的Web組件，根據這些組件，可以快速的搭建一個漂亮、功能完備的網站。

優點：

• 有自己的生態圈，不斷的更新迭代

• 提供了一套簡潔、直觀、強悍的組件

• 標準化的HTML+CSS編碼規範

• 讓開發更簡單，提高了開發效率。

• 擴展性強，雖然界面組件樣式已經定義好了，我們還可以自定義，修改默認樣式。

版本：

• 2.x.x 停止維護

  • 優點：兼容性好

  • 缺點：代碼不夠簡潔、功能不夠完善

• 3.x.x 目前使用最多

  • 優點：穩定，偏向於開發響應式佈局，移動設備優先的WEB項目

  • 缺點：放棄了IE67，對IE8支持但是界面效果不友好

• 4.x.x 測試階段

基本模板

目錄結構說明：

<!DOCTYPE html>
<!--使用HTML5文檔，使用中文簡體-->
<html lang="zh-CN">
<head>
  <!--meta1. 使用utf-8編碼-->
  <meta charset="utf-8">
  <!--meta2. 當前頁面在在IE瀏覽器訪問時，使用最新的ie瀏覽器內核進行渲染-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--meta3. 視口設置-->
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都必須跟隨其後！ -->
  <title>bootstrap基本模板</title>
  
  <!--引入bootstrap的核心樣式文件-->
  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  
  <!-- html5shiv是用來解決IE8以下瀏覽器不支持HTML5語義化標籤的問題 -->
  <!--respond是用來解決IE8以下瀏覽器不支持媒體查詢的問題，注意：respond不支持file協議打開-->
  <!--條件註釋：IE瀏覽器專屬-->
  <!--[if lt IE 9]>
  <script src="lib/html5shiv/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
<h1>你好，世界！</h1>

<!--bootstrap依賴與jquery，因此需要在bootstrap之前引入jquery文件-->
<script src="lib/jquery/jquery-1.12.4.js"></script>
<!--引入bootstrap的核心js文件-->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

全局樣式

normalize.css

Normalize.css是一種CSS reset的替代方案。經過@necolas和@jon_neal花了幾百個小時來努力研究不同瀏覽器的默認樣式的差異，這個項目終於變成了現在這樣。

官網 (http://necolas.github.io/normalize.css/ )

github網址 (https://github.com/necolas/normalize.css )

 

normalize的特點：

• 保護有用的瀏覽器默認樣式而不是完全去掉它們

• 一般化的樣式：爲大部分HTML元素提供

• 修復瀏覽器自身的bug並保證各瀏覽器的一致性

• 優化CSS可用性：用一些小技巧

Normalize.css支持包括手機瀏覽器在內的超多瀏覽器，同時對HTML5元素、排版、列表、嵌入的內容、表單和表格都進行了一般化。儘管這個項目基於一般化的原則，但我們還是在合適的地方使用了更實用的默認值。

container容器

Bootstrap 需要爲頁面內容和柵格系統包裹一個 .container 容器。默認帶了15px的padding值。

.container 類用於固定寬度並支持響應式佈局的容器。

<div class="container">
  ...
</div>

.container-fluid 類用於 100% 寬度，佔據全部視口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

柵格系統

柵格系統，也叫網格系統

• .row用於抵消.container容器的15px的padding值

• 可以在.row中嵌套column

柵格系統常用類（總共12列）

類名	例子	解釋
.col-xs-xx	.col-xs-6	在超小屏幕（及以上）生效
.col-sm-xx	.col-sm-6	在小屏幕（及以上）生效
.col-md-xx	.col-md-6	在中屏幕（及以上）生效
.col-lg-xx	.col-lg-3	在大屏幕及生效，佔1/4
.col-lg-xx	.col-lg-4	在大屏幕及生效，佔1/3
.col-lg-xx	.col-lg-6	在大屏幕及生效，佔1/2

響應式柵格:

lg: 4: 4: 4
md：5： 2： 5
sm: 3: 6: 3
xs: 1: 10 : 1

<div class="row">
   <div class="col-lg-4 col-md-5 col-sm-3 col-xs-1">1</div>
   <div class="col-lg-4 col-md-2 col-sm-6 col-xs-10">2</div>
   <div class="col-lg-4 col-md-5 col-sm-3  col-xs-1">3</div>
</div>

列嵌套：

<div class="col-lg-4">
      <!--柵格系統無處不在，只要父盒子有寬度，就可以使用柵格系統-->
      <div class="row">
        <div class="col-lg-6"></div>
        <div class="col-lg-6"></div>
      </div>
    </div>

列偏移：

<!-- 使用 .col-md-offset-* 類可以將列向右側偏移。-->
<div class="row">
  <div class="col-lg-3"></div>
  <!--col-lg-offset-3:在大屏下，這個div將向右側偏移3個單位-->
  <div class="col-lg-6 col-lg-offset-3"></div>
</div>

<h4>列偏移：col-*-offset-n(整體向右偏移)</h4>
<!-- 列偏移 -->
<div class="row">
      <div class="col-lg-4 col-lg-offset-4"></div>
      <div class="col-lg-2"></div>
</div>
<!-- 向左偏移 向右偏移 -->
<h4>col-xs-push-n 向右推n列  col-xs-pull-n  向左拉n列 （偏移是當前列）</h4>
<h4></h4>
<div class="row">
      <div class="col-xs-4 col-xs-push-2">1</div>
      <div class="col-xs-2 col-xs-pull-4">2</div>
</div>

響應式工具(推薦使用hidden相關的屬性 )

其他

bootstrap內置的東西是在太多，不可能每一個都詳細的講，但是bootstrap文檔簡潔明瞭，當我們用到了相關的東西的時候，再來詳細的查閱文檔。

向css文件中引入圖標字體模板：

@font-face {
  	font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

<style>
        /*將圖標字體引入到頁面中*/
        @font-face {
            font-family:'my-font';
            src: url('font/iconfont.eot');
            src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
            url('font/iconfont.woff') format('woff'),
            url('font/iconfont.ttf') format('truetype'),
            url('font/iconfont.svg#iconfont') format('svg');
        }    
        h1 {
            font-family:'my-font';
        }
        .car::before {
            /* &#xe605; */
            content:"\e605";
            font-family:'my-font';
        }
        .pig::before {
            content: "\e66b";
            font-family:'my-font';
        }
</style>    
</head>
<body>  
    <p class="car"></p>
    <h1 class="car"></h1>
    <em class="pig"></em>
</body>

8. REM

各種佈局特徵的對比

由於市面上手機種類繁多，導致移動端的屏幕種類非常的混亂，比如有常見的320px 360px 375px 384px 480px 640px等。在開發中，美工一般只會提供750px或者是640px的設計稿，這就要求我們通過一張設計稿能夠適配所有的屏幕。

通常解決方案如下：

• 流式佈局：可以讓各種屏幕都適配，只是在大屏幕中顯示效果不是非常的友好, 即使這樣, 由於開發效率高, 成本低, 目前使用流式佈局的公司還是非常多的，比如 亞馬遜 、京東 、攜程

• 響應式佈局：國內很少有大型網站使用，主要原因是工作大，可維護性不好 。所以一般都是中小型的門戶或者博客類站點會採用響應式，因爲這樣可以節約成本。

• rem佈局：rem能夠實現寬高自適應的佈局方式， 目前使用rem佈局的有：淘寶 、 蘇寧

rem是什麼？

rem（font size of the root element）是指相對於根元素的字體大小的單位。它是一個相對單位。

em（font size of the element）是指相對於當前元素的字體大小的單位。它也是一個相對單位。

html{
  font-size:16px;
}
body {
  font-size:20px;
}
div.em {
  /*em的計算方式參照的當前元素的font-size，如果不設置，默認繼承自父盒子*/
  width:2em;
  height:2em;
  background-color:red;
}
/*rem的計算方式參照的是html的font-size*/
div.rem {
  width:2rem;
  height:2rem;
  background-color:blue;
}

rem與響應式

因爲rem的基準點是根元素html的字體大小，因此我們只需要設置不同屏幕的html的font-size大小不一樣就可以達到不同屏幕的適配了。

rem與媒體查詢

使用rem配合媒體查詢可以適配多個終端

 @media (min-width: 320px) {
      html {
        /*font-size: 100/750 * 320px*/
        font-size: 42.67px;
      }
    }
    @media (min-width: 375px) {
      html {
        font-size: 50px;;
      }
    }
    @media (min-width: 414px) {
      html {
        font-size: 55.2px;;
      }
    }
    @media (min-width: 480px) {
      html {
        font-size: 64px;;
      }
    }
    @media (min-width: 640px) {
      html {
        font-size: 85.33px;
      }
    }
    @media (min-width: 750px) {
      html {
        font-size: 100px;;
      }
    }

優點：使用媒體查詢適配，速度快。

缺點：適配多個終端時，需要添加響應的代碼。

rem與javascript

通過javascript獲取可視區的寬度，計算font-size的值，也可以適配多個終端。

使用rem進行佈局步驟：
基於設計佈局時 設置1rem = 100px ;
1-將頁面中所有單位 換算成rem
2-動態檢測屏幕寬度 給改變rem的值

var base = 100;
var design = 750;

function responsive() {
  var pageWidth = window.innerWidth;

  if ( pageWidth <= 320 ) {
    pageWidth = 320;
  }

  if ( pageWidth >= 750 ) {
    pageWidth = 750;
  }

  var size = base / design * pageWidth;
  document.documentElement.style.fontSize = size + "px";
}

responsive();
window.addEventListener("resize", responsive);

優點：直接適配所有的終端

缺點：必須在頁面加載之前設置html的font-size值，不然會出現文字大小調動的情況。

9. swiper插件的使用

官網： https://3.swiper.com.cn/