自適應和響應式

背景

    隨着移動設備和前端技術的發展，交互頁面也在移動端使用愈來愈頻繁。可是移動設備屏幕的大小和分辨率並不一致，這致使了並不能按照pc端編寫頁面的方式去編寫移動端頁面。
    隨着實踐地不斷進行和技術的發展，逐漸造成了下面幾個概念：

• 自適應（Adaptive）
       程序代碼主動地去根據不一樣的屏幕大小，去實現不一樣的樣式代碼，須要實現不一樣的樣式代碼。
• 響應式（Responsive）
       程序代碼被動地去適應屏幕的寬度變化，常用百分比或者media查詢。
  網上流傳最多的圖就是下面的圖，我的認爲仍是能夠可以解釋二者之間的區別

但其實這二者之間的區別很難區分，有的程序界面更是把二者結合起來，實現更好的用戶體驗，畢竟用戶至上。下面就從實際應用方面來說一下，具體的實際應用。

響應式

不管響應式仍是自適應，都是針對每個html元素進行寬度的變化和佈局的變化。

在我看來，響應式就是讓html元素寬度可以根據不一樣的屏幕寬度，進行對應的寬度變化。

實現方式——百分比寬度

經常使用的百分比寬度，好比antd的柵格佈局，就是將屏幕劃分爲24格，每個格子佔據4.1%的寬度。

實現方式——flex佈局

    flex是彈性盒，將某一個元素設置爲彈性盒，就建立了一個BFC，能夠設置內部元素的相關屬性。能夠設置內部元素的shrink/grow/order。這樣就可以讓內部元素隨着屏幕的變化進行不一樣的寬度變化。
    這裏就不講flex的具體知識點了，詳情查看參考資料。

缺點

針對元素進行寬度變化，佈局仍然遵循流式佈局。全部的佈局都是統一的。
具體內容的元素並無變化，好比字體的大小。

自適應

自適應是，程序代碼已經爲不一樣的寬度配備了不一樣的樣式代碼（大小和佈局）。當用戶界面切換到不一樣的大小的時候，就展現不一樣的樣式或者佈局。

具體能夠分爲兩類：

• 階梯式
• 平滑式

一、階梯式自適應

如圖所示:

階梯式自適應，就是對不一樣的大小設置不一樣的樣式，一般使用media查詢。設置不一樣的斷點，在不一樣的斷點處設置不一樣的樣式。固然也能夠設置一個範圍內的樣式。

@media screen and (device-width: 640px) {
    html {
        font-size: 100px;
        color: blue
    }
}

@media all and (min-width:500px) and (max-width:1000px){
	body{
        color:#f00;
    }
}
複製代碼

能夠根據不一樣的屏幕寬度設置不一樣的佈局

與rem（em）結合

rem是根據文檔元素跟節點的字體大小設置不一樣的大小
em是根據當前對象的字體大小

@media screen and (device-width: 640px) {
    html {
        font-size: 100px;
        color: blue
    }
}
div {
    // 這裏的1rem就是100px
    width: 1rem;
}
複製代碼

與rem結合，能夠解決不一樣屏幕尺寸下，字體大小的變化，對於font-size大小的設置，能夠參考天貓、京東的rem設置。

缺點

這樣作能夠在不一樣的寬度顯示不一樣的樣式，可是無法實現持續性的變化，可能會看到不一樣頁面大小請看下屏幕中的字體或者其餘會忽然變化。

二、平滑式自適應

如圖所示：

平滑自適應能夠看做曲度特別小的階梯式自適應。

方法

主要經過設置監聽函數，動態改變font-size的大小。

window.addEventListener('resize', adjustWidth);
const adjustWidth = () => {
    var deviceWidth = 
        document.documentElement.clientWidth > 1300 
        ? 1300 
        : document.documentElement.clientWidth;

    document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
}
複製代碼

結合rem就能夠動態設置html元素的大小。

技術方案選擇

總體來講，沒有哪種方案是最合適的。常常須要幾種不一樣的技術手段互相結合。 常常用的方式就是：

• 經過media查詢，設置font-size的大小，具體的元素能夠經過flex或者百分比佈局，就基本能夠解決大部分問題。

祝你們端午節快樂。

參考資料

一、Flex佈局
二、web自適應
三、自適應和響應式區別
四、技術方案選擇