移動端适配的那點事

前言

目前，在實際使用者使用習慣中，會有很多的使用者并不會直接下載下傳APP進行使用，而是采取移動端浏覽器直接搜尋。對于移動端web頁面，有哪些小細節需要注意？對于五花八門的螢幕如何适配？且聽下文慢慢道來。。。

移動端适配特點分析

在本人移動端開發學習中總結了一下幾個特點：

移動端的螢幕不大，顯示的内容将遠少于PC端。這就意味着布局将會變得簡單。
移動端為了适配不同的螢幕，一般都是通欄流式布局。而左右布局則較少。
移動端一般都是最新的浏覽器。

移動端的主流浏覽器主要有：QQ浏覽器、百度浏覽器、safair浏覽器、UC浏覽器。這些浏覽器的核心都是webkit（或者比這個更進階的核心） ==>這就意味着我們隻需要做webkit的相容即可，不必像PC端相容那麼多的浏覽器。另外移動端浏覽器對 H5 和 css3相容很好。

像素

現在移動端的螢幕都是高清顯示屏，或者稱為視網膜屏（retina屏），這種螢幕會将更多的實體像素擠壓到一塊螢幕裡。

實體像素：裝置上真實的實體單元。

裝置獨立像素：螢幕上1px真實顯示的大小。

裝置像素比（DPR）：實體像素和裝置獨立像素的比值。簡單的說就是一個裝置獨立像素可以塞進幾個實體像素。

圖檔失真

由于高清屏的出現，随之給頁面顯示帶來一個問題：圖檔失真。為什麼會出現圖檔失真的情況呢？舉個例子：有個10px10px的圖檔進行展示，你如果在高清屏中仍然将這張圖檔展示為10px10px的大小，如果該螢幕是個2倍屏，那麼我們實際上是以20px20px的實體像素展示的之前10px10px的圖檔。顯然圖檔被分散到更多的實體像素點上展示，圖檔品質下降，圖檔失真。如何解決這個問題呢？且聽下文分曉。

流行設計稿尺寸

目前市面上流行的設計稿主要有兩種。

設計稿寬度640px的。這種設計稿是以iPhone4（width320px）為基準
設計稿寬度750px的。這種設計稿是以iPhone6（width375px）為基準

當然也有一些設計稿寬度大于1000px。當你使用百分比布局的時候，小于1000px的一般除以2，大于1000px的除以3。

是以，對圖檔失真我們的解決方案是：将圖檔進行壓縮：

當圖檔作為背景圖時，使用background-size屬性進行壓縮。
當作為img時：通過壓縮width和height來實作。

移動端适配方案

若想适配移動端浏覽器，我們還需要知道，PC端浏覽器和移動端浏覽器對xxx.html展示時的差別。差別在于：移動端會在頁面結構外包裹一層虛拟容器----viewport，而PC端則是直接加載頁面的。

那我們如何驗證呢？當我們給根元素設定width：100%，在移動端展示的時候，發現頁面的寬度并不是浏覽器的寬度，頁面出現了滾動條。顯然根元素的width：100%并不是相對于浏覽器的100%。

其實，現在它是相對于viewport的width：100%

viewport的特點如下：

viewport是移動端浏覽器特有的。
主流浏覽器viewport預設寬度是960px。
可縮放
可設定寬度
可設定是否允許使用者縮放頁面
承載網頁

viewport常見參數：

width ：設定視口寬度
initial-scale ：設定視口的預設縮放比
user-scalable : 設定視口是否允許使用者自行縮放
minimum-scale : 最小運作縮放比
maximum-scale : 最大運作縮放比

《meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0"/》

百分比布局（流式布局）适配方案

這種适配方案，是将width使用百分比，而高度進行寫死。具體做法就是，對寬度使用百分比布局，高度的則針對設計稿進行2倍或者3倍的壓縮後寫死。

缺點：這種适配方案隻做到了，寬度的自适應，對于高度并做不到自适應，不同螢幕顯示的内容多少是不一樣的。

等比例布局（rem結合css3媒體查詢）

一、rem和em的差別

相同點： rem和em都是相對機關。

差別： rem是基于根元素html的字型大小來的，而em是基于父容器的字型大小來的。

二、css3的媒體查詢

響應式開發：随着不同的終端越來越多，人們針對不同終端都要開發相對應的一套頁面。而響應式開發則是一套頁面适配多個終端的開發方案。

現在螢幕劃分：

超小屏也就是手機--->768px--->小屏（iPad）---> 992px---> 中屏(老式的台式電腦)--->1200px--->現在的筆記本，台式電腦

媒體查詢文法：

@media screen and (min-width:1200px) and *** {
             // 可以寫樣式 （選擇器）
     }
複制代碼

注意：

and 後面一定有空格。
可以寫多個and添加多個條件。
可以寫多個@media形成連貫區間。
符合媒體查詢條件的樣式會生效，将之前的樣式進行覆寫。（隻會覆寫重複的）
媒體查詢是從上到下執行的，符合條件樣式就會生效，是以需要注意條件的排列順序。

簡寫：

@media （min-width:1200px）{
         
     }
複制代碼

等比例布局的核心思想就是：等比例縮放。即将設計稿定比例縮放到你螢幕可以顯示的程度。

比例：設計稿寬度： 100px = 螢幕寬度：X

x = 螢幕寬度 * 100 / 設計稿寬度

這裡100px 是一個基準值，寫為100px的原因無非是為了友善計算。而這裡得到的X将作為HTML的fon-size的屬性值。

很明顯這裡涉及到了計算，傳統的css并不能滿足需求，在這裡我們使用less來完成适配。當然，使用JS也可以實作，但本人推薦使用媒體查詢來完成。

在全局的less檔案中，代碼如下：

//定義變量
      @psdWidth : 750 ; // 設計稿的寬度
      @baseSize : 100 ; // 基準值
      @deviceWidthList : 320px , 360px , 375px , ...., 750px ; // 所需要配置的主流裝置
                                                               // 定義less數組
                                                               // 因為媒體查詢條件，
                                                               // 需要從小排列到大
     .adapterFuc(@index) when (@index <= length(@deviceWidthList)){
         @media (min-width:extract(@deviceWidthList,@index)){
             html{
                 font-size : extract(@deviceWidthList,@index)/@psdWidth * @baseSize;
             }
         }
         .adapterFuc(@index + 1);
     }
     
     .adapterFuc(1);
複制代碼

注釋：

less 中提供length（數組）方法擷取數組的長度。
less 中提供extract(數組，項數)方法用來擷取數組中的某一項，項數是從 1 開始的。
less 中沒有for循環類似的周遊結構。隻能通過when添加條件和自調用

移動端事件

綁定事件建議

addEventListener('事件名'，回調函數)

一、touch事件（觸屏支援）

touchstart ：觸摸開始。手指剛剛觸碰到螢幕的時候。
touchmove ：手指在螢幕上滑動的時候。這是一個不斷觸發的事件。
touchend ：觸摸結束。手指離開螢幕。
touchcancel ：被迫中止滑動的時候。（來電）

touch事件的回調函數，第一個參數會接受touchEvent事件對象。包含觸摸的相關資料。

觸摸點集合，這是一種僞數組

changedTouches ：目前頁面最新改變的觸摸點集合。（可以全程記錄）
targetTouches ：目前元素上面的觸摸點集合。
touches : 目前頁面上所有觸摸點的集合。

二、click事件

移動端click點選事件，并不靈敏，有300ms的延遲。這樣的原因是因為，移動端需要時間判斷是滑動還是點選。但是這樣造成的影響是：響應過慢，使用者體驗下降。

解決方案：

使用tap事件（可以了解為更快的點選事件），但是原生的JS并沒有提供這一個事件，需要以touch事件為基礎進行封裝。但是也有一些架構已經實作了這種事件，如：zepto.
使用 fastclick.js 插件。使用後可以直接使用click事件。

三、滑動事件（也是基于touch事件實作的）

小記一下本人新了解的原生事件：

transitionstart , transitionend ====> 為css3屬性transition過度開始和結束的事件
animationstart ， animationend ====> 為動畫開始和結束的事件

一些移動端容器布局

一、版心容器

.contain{
         width : 100%;
         max-width:640px;
         min-width:320px;
         margin : 0 auto;
         height : xxx
     }
複制代碼

二、實作滿屏效果

.contain{
         position : fixed;
         width : 100%;
         height : 100%;
     }
複制代碼

原理：固定定位時，寬高相對于浏覽器。

三、實作移動端左右布局

方案一：

頁面結構如下：

<div class="wrap">
         <div class="left"></div>
         <div class="right"></div>
     </div>
複制代碼

樣式如下：

*{
        margin: 0;
        padding: 0;
     }
     .wrap{
        position: fixed;
        width: 100%;
        height: 100%;
        background: red;
     }
     .left{
        height: 100%;
        width: 100px;
        float: left;
        background: pink
     }
     .right{
        height: 100%;
        background: green;
        overflow: hidden;
     }
複制代碼

使用的小技巧就是BFC模式。

如果不添加overflow屬性的時候,.left盒子會影響.right盒子内容的顯示的,這種影響并不是遮擋，而是占用了.right盒子内容顯示的空間。

而使用overflow屬性将.right盒子設定為絕緣容器，這種容器相當于自己是一塊獨立的空間，即我不影響你，那麼你也别想影響我。。。

方案二：

頁面結構如下：

<div class="wrap">
         <div class="left"></div>
         <div class="right"></div>
     </div>
複制代碼

樣式如下：

*{
        margin: 0;
        padding: 0;
    }
     .wrap{
        position: fixed;
        width: 100%;
        height: 100%;
        background: red;
    }
     .left{
        height: 100%;
        width: 100px;
        background: pink;
    }
     .right{
        position: absolute;
        left: 100px;
        right: 0;
        top: 0;
        bottom: 0;
        background: gray
     }
複制代碼

小技巧，position絕對定位，設定四個方向的距離，會将盒模型拉開。

結束

感謝大家閱讀，本文主要是本人，工作學習的總結，如有錯誤，歡迎指出，共同進步。

轉載于:https://juejin.im/post/5d04c6c65188254a10112648