移動端自適應解決方案
談到移動端自適應這個話題，如果要真正做好，那應該說是前端開發中的一個比較難以掌握的知識點了。甚至在很多項目中一些涉及到移動端自適應的特殊需求被當作不可實現而砍掉，以及在部份機型下則默認為不處理。今天，我們就來看看，我們應該如何來做好自適應？以及移動端乃至所有設備終端下的自適應至底可以做到什么極致？
一、什么是移動端自適應？
我們先來簡單講述一下什么是移動端自適應以及為什么前端要做移動端自適應。先看圖片演示，如下圖所示各種移動設備尺寸各有不同，即使是在同一設備，不同APP內打開也因為有的APP有頂欄或底欄，而有些APP沒有頂欄或底欄，頂欄或底欄的尺寸也不同，所以頁面的可視區也大小形狀各不相同。正因為有這些千奇百怪的設備與應用程序，所以才需要我們的一套網頁代碼可以適應任何尺寸的設備或應用。這就是我們平時所說的移動端自適應。
二、為什么要做移動端自適應？
上面講到，因為網頁所處的設備與應用的環境的可視區尺寸不同，所以我們要讓一套代碼適應各種環境。這就是為什么我們要做移動端自適應的原因。如果對這個概念仍然不是很清楚，我們可以先看一下如果不做自適應會是什么樣子？
如上圖所示，當網頁沒有做好自適應時，不僅在某些設備中內容顯示不全，而且連按鈕都看不到交互更是無從談起。這就是為什么我們要做好移動端自適應的原因。下面我們來看看如果上面所展示的網頁做好了自適應，會是如何？
三、如何做移動端自適應？
說到做移動端自適應，可能很多人都會想到淘寶的flexible.js移動端自適應方案。這幾乎成為行業通用方案。但我在這里我想推薦另一個自適應方案@fekit/mc-ratio。如果你僅僅只是想做個基礎的移動端自適應并且不打算追求極致的話。那你可以用flexible.js也可以用@fekit/mc-ratio。但是如果你想要的并不是一般的移動端自適應方案，一個可以達到極致體驗的移動端解決方案那就請選擇@fekit/mc-ratio。至于原因和效果，在下面的演示示你會知道。
現在我們將一步步從基礎的移動端自適應講到各種復雜的自適應需求。如果你對以下述語如果看不明白沒關系，因為我一時想不到更準確的語來描述。查是看動態演示圖片就可以理解啦！（本文僅提供各種場景需求下的自適應解決方案的演示效果和基本的代碼說明，不做深入的代碼教學體代碼請大家移步到NPM或GIT文檔查看技術API文檔，插件將在文章結尾提供鏈接）
第一種場景：基礎自適應，僅對寬度做自適應計算。高度不自適應，一般適用于有滾動條的頁面。這也是移動態最常見的通用做法。（flexible.js也僅僅能做到寬度自適應計算）
import mcRatio from '@fekit/mc-ratio';
// 基本的自適應
mcRatio({
size: [750, 1334], // 設計稿的尺寸,無論考慮設計稿是幾倍圖，按設計稿尺寸設置即可
});
第二種場景：寬高雙向自適應計算。當開啟寬度高度雙向自適應并設定可見區必需可見內容的尺寸時，無論尺寸大小。必需可見的內容按比例縮放保持在窗口區一定可見。見下圖所示，設定的必需可見尺寸范圍為750*1334。那無論窗口多大或多小這個區域都能保持可見的。
// 整個頁面開啟了雙向自適應，寬高按比例縮放
mcRatio({
size: [750, 1334], // 設計稿的尺寸
full: true // 開啟雙向自適應
});
第三種場景：全屏寬高雙向自適應+%單位做額外的全屏自適應增強，所有內容總是在一屏放下。無論寬高尺寸如何變化，也不論是橫屏還是豎屏，總是保持全屏內容可見，并保持比例不變。同時又讓一些額外的元素（比如說背景）總是充滿整個屏幕。
// 主體內容開啟了雙向自適應，寬高按比例縮放
mcRatio({
size: [750, 1334], // 設計稿的尺寸
full: true // 開啟雙向自適應
});
// 背景使用%做額外處理保持充滿全屏
第四種場景：滾屏自適應+靈活閥值的寬高雙向自適應計算，如下面兩圖所示，左邊的寬高值比例是750/1334（彈框上面空余比較多） ，而右邊的寬高值比例是750／1050(寬高值比例閥值設置的僅本彈框高一點，從而達到在小屏中的空間利用率最高)。這個高度閥值可以靈活運用。從而達到最佳體驗。
左邊的：
// 左邊的
mcRatio({
el: document.getElementById('layer'), // 要縮放的元素（彈框）
size: [750, 1334], // 窗口寬高比，高度小于1334時開始縮放高度。
full: true // 開啟雙向自適應
});
右邊的：
// 右邊的
mcRatio({
el: document.getElementById('layer'), // 要縮放的元素（彈框）
size: [750, 1050], // 當窗口寬高比，高度小于1050時才開始縮放高度。
full: true // 開啟雙向自適應
});
第五種場景：全局自適應+局部自適應多重自適應計算方案，如下圖所示，頁面僅根據寬度自適應，高度滾動不用做自適應，但是部份元素（比如下圖所示的彈框）又脫離全局自適應可以獨立的進行寬高雙向自適應。這在眾多項目中都非常有用。【推薦，成本性價比最高的方案】
// 全局的
mcRatio({
size: [750, 1050], // 當窗口寬高比，高度小于1050時才開始縮放高度。
full: flase // 不開啟雙向自適應
});
// 局部的（彈框的）
mcRatio({
el: document.getElementById('layer'), // 不設置時默認為全局
size: [750, 1050], // 當窗口寬高比，高度小于1050時才開始縮放高度。
full: true // 開啟雙向自適應
});
第六種場景：基礎自適應，通過%單位或樣式做一些自適應增強可以做到全屏無滾動條，但是對設計與前端技術有雙重高要求，可能需要前端懂設計并且懂得無界設計理念。(無界設計是指設計與開發時需要考慮到在任何尺寸下的形態及自適應過渡)
四、自適應解決方案@fekit/mc-ratio
看過上面從基本到復雜的移動端自適應場景需求與演示，現在我正式向大家推薦@fekit/mc-ratio，這個插件可以幫助你做到上面所演示的各種簡單或復雜場景下的自適應。是一套可以吊打淘寶的flexible.js方案的自適應解決方案。
NPM: https://www.npmjs.com/package/@fekit/mc-ratio
GIT: https://gitlab.com/fekits/mc-ratio
如果在使用過程中遇到任何問題，可以留言交流，謝謝！
