移動端適配的那點事

時間 2019-12-12

標籤移動適配那點欄目無線简体版

原文原文鏈接

前言

目前，在實際用戶使用習慣中，會有不少的用戶並不會直接下載APP進行使用，而是採起移動端瀏覽器直接搜索。對於移動端web頁面，有哪些小細節須要注意？對於五花八門的屏幕如何適配？且聽下文慢慢道來。。。css

移動端適配特色分析

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

移動端的屏幕不大，顯示的內容將遠少於PC端。這就意味着佈局將會變得簡單。
移動端爲了適配不一樣的屏幕，通常都是通欄流式佈局。而左右佈局則較少。
移動端通常都是最新的瀏覽器。

移動端的主流瀏覽器主要有：QQ瀏覽器、百度瀏覽器、safair瀏覽器、UC瀏覽器。這些瀏覽器的內核都是webkit（或者比這個更高級的內核） ==>這就意味着咱們只須要作webkit的兼容便可，沒必要像PC端兼容那麼多的瀏覽器。另外移動端瀏覽器對 H5 和 css3兼容很好。css3

像素

如今移動端的屏幕都是高清顯示屏，或者稱爲視網膜屏（retina屏），這種屏幕會將更多的物理像素擠壓到一塊屏幕裏。web

物理像素：設備上真實的物理單元。數組

設備獨立像素：屏幕上1px真實顯示的大小。瀏覽器

設備像素比（DPR）：物理像素和設備獨立像素的比值。簡單的說就是一個設備獨立像素能夠塞進幾個物理像素。框架

圖片失真

因爲高清屏的出現，隨之給頁面顯示帶來一個問題：圖片失真。爲何會出現圖片失真的狀況呢？舉個例子：有個10px10px的圖片進行展現，你若是在高清屏中仍然將這張圖片展現爲10px10px的大小，若是該屏幕是個2倍屏，那麼咱們其實是以20px20px的物理像素展現的以前10px10px的圖片。顯然圖片被分散到更多的物理像素點上展現，圖片質量降低，圖片失真。如何解決這個問題呢？且聽下文分曉。less

流行設計稿尺寸

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

設計稿寬度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媒體查詢）

1、rem和em的區別

相同點： rem和em都是相對單位。

區別： rem是基於根元素html的字體大小來的，而em是基於父容器的字體大小來的。

2、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('事件名'，回調函數)

1、touch事件（觸屏支持）

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

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

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

changedTouches ：當前頁面最新改變的觸摸點集合。（能夠全程記錄）
targetTouches ：當前元素上面的觸摸點集合。
touches : 當前頁面上全部觸摸點的集合。

2、click事件

移動端click點擊事件，並不靈敏，有300ms的延遲。這樣的緣由是由於，移動端須要時間判斷是滑動仍是點擊。可是這樣形成的影響是：響應過慢，用戶體驗降低。

解決方案：

使用tap事件（能夠理解爲更快的點擊事件），可是原生的JS並無提供這一個事件，須要以touch事件爲基礎進行封裝。可是也有一些框架已經實現了這種事件，如：zepto.
使用 fastclick.js 插件。使用後能夠直接使用click事件。

3、滑動事件（也是基於touch事件實現的）

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

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

一些移動端容器佈局

1、版心容器

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

2、實現滿屏效果

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

原理：固定定位時，寬高相對於瀏覽器。

3、實現移動端左右佈局

方案一：

頁面結構以下：

<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絕對定位，設置四個方向的距離，會將盒模型拉開。