移動(dòng)端自適應(yīng)解決方案
談到移動(dòng)端自適應(yīng)這個(gè)話題率碾，如果要真正做好，那應(yīng)該說是前端開發(fā)中的一個(gè)比較難以掌握的知識(shí)點(diǎn)了阁猜。甚至在很多項(xiàng)目中一些涉及到移動(dòng)端自適應(yīng)的特殊需求被當(dāng)作不可實(shí)現(xiàn)而砍掉颗味，以及在部份機(jī)型下則默認(rèn)為不處理脖律。今天，我們就來看看蟀俊，我們應(yīng)該如何來做好自適應(yīng)钦铺？以及移動(dòng)端乃至所有設(shè)備終端下的自適應(yīng)至底可以做到什么極致？
一肢预、什么是移動(dòng)端自適應(yīng)矛洞？
我們先來簡單講述一下什么是移動(dòng)端自適應(yīng)以及為什么前端要做移動(dòng)端自適應(yīng)。先看圖片演示误甚，如下圖所示各種移動(dòng)設(shè)備尺寸各有不同缚甩，即使是在同一設(shè)備，不同APP內(nèi)打開也因?yàn)橛械腁PP有頂欄或底欄窑邦，而有些APP沒有頂欄或底欄擅威，頂欄或底欄的尺寸也不同，所以頁面的可視區(qū)也大小形狀各不相同冈钦。正因?yàn)橛羞@些千奇百怪的設(shè)備與應(yīng)用程序郊丛，所以才需要我們的一套網(wǎng)頁代碼可以適應(yīng)任何尺寸的設(shè)備或應(yīng)用。這就是我們平時(shí)所說的移動(dòng)端自適應(yīng)。
二厉熟、為什么要做移動(dòng)端自適應(yīng)导盅？
上面講到，因?yàn)榫W(wǎng)頁所處的設(shè)備與應(yīng)用的環(huán)境的可視區(qū)尺寸不同揍瑟，所以我們要讓一套代碼適應(yīng)各種環(huán)境白翻。這就是為什么我們要做移動(dòng)端自適應(yīng)的原因。如果對(duì)這個(gè)概念仍然不是很清楚绢片，我們可以先看一下如果不做自適應(yīng)會(huì)是什么樣子滤馍？
如上圖所示，當(dāng)網(wǎng)頁沒有做好自適應(yīng)時(shí)底循，不僅在某些設(shè)備中內(nèi)容顯示不全巢株，而且連按鈕都看不到交互更是無從談起。這就是為什么我們要做好移動(dòng)端自適應(yīng)的原因熙涤。下面我們來看看如果上面所展示的網(wǎng)頁做好了自適應(yīng)阁苞，會(huì)是如何？
三祠挫、如何做移動(dòng)端自適應(yīng)那槽？
說到做移動(dòng)端自適應(yīng)，可能很多人都會(huì)想到淘寶的flexible.js移動(dòng)端自適應(yīng)方案茸歧。這幾乎成為行業(yè)通用方案倦炒。但我在這里我想推薦另一個(gè)自適應(yīng)方案@fekit/mc-ratio。如果你僅僅只是想做個(gè)基礎(chǔ)的移動(dòng)端自適應(yīng)并且不打算追求極致的話软瞎。那你可以用flexible.js也可以用@fekit/mc-ratio逢唤。但是如果你想要的并不是一般的移動(dòng)端自適應(yīng)方案，一個(gè)可以達(dá)到極致體驗(yàn)的移動(dòng)端解決方案那就請(qǐng)選擇@fekit/mc-ratio涤浇。至于原因和效果鳖藕，在下面的演示示你會(huì)知道。
現(xiàn)在我們將一步步從基礎(chǔ)的移動(dòng)端自適應(yīng)講到各種復(fù)雜的自適應(yīng)需求只锭。如果你對(duì)以下述語如果看不明白沒關(guān)系著恩，因?yàn)槲乙粫r(shí)想不到更準(zhǔn)確的語來描述。查是看動(dòng)態(tài)演示圖片就可以理解啦ｒ哒埂（本文僅提供各種場(chǎng)景需求下的自適應(yīng)解決方案的演示效果和基本的代碼說明喉誊，不做深入的代碼教學(xué)體代碼請(qǐng)大家移步到NPM或GIT文檔查看技術(shù)API文檔，插件將在文章結(jié)尾提供鏈接）
第一種場(chǎng)景：基礎(chǔ)自適應(yīng)纵顾，僅對(duì)寬度做自適應(yīng)計(jì)算伍茄。高度不自適應(yīng)，一般適用于有滾動(dòng)條的頁面施逾。這也是移動(dòng)態(tài)最常見的通用做法敷矫。（flexible.js也僅僅能做到寬度自適應(yīng)計(jì)算）
import mcRatio from '@fekit/mc-ratio';
// 基本的自適應(yīng)
mcRatio({
size: [750, 1334], // 設(shè)計(jì)稿的尺寸,無論考慮設(shè)計(jì)稿是幾倍圖例获，按設(shè)計(jì)稿尺寸設(shè)置即可
});
第二種場(chǎng)景：寬高雙向自適應(yīng)計(jì)算。當(dāng)開啟寬度高度雙向自適應(yīng)并設(shè)定可見區(qū)必需可見內(nèi)容的尺寸時(shí)曹仗，無論尺寸大小榨汤。必需可見的內(nèi)容按比例縮放保持在窗口區(qū)一定可見。見下圖所示怎茫，設(shè)定的必需可見尺寸范圍為750*1334收壕。那無論窗口多大或多小這個(gè)區(qū)域都能保持可見的。
// 整個(gè)頁面開啟了雙向自適應(yīng)轨蛤，寬高按比例縮放
mcRatio({
size: [750, 1334], // 設(shè)計(jì)稿的尺寸
full: true // 開啟雙向自適應(yīng)
});
第三種場(chǎng)景：全屏寬高雙向自適應(yīng)+%單位做額外的全屏自適應(yīng)增強(qiáng)啼器，所有內(nèi)容總是在一屏放下。無論寬高尺寸如何變化俱萍，也不論是橫屏還是豎屏，總是保持全屏內(nèi)容可見告丢，并保持比例不變枪蘑。同時(shí)又讓一些額外的元素（比如說背景）總是充滿整個(gè)屏幕。
// 主體內(nèi)容開啟了雙向自適應(yīng)岖免，寬高按比例縮放
mcRatio({
size: [750, 1334], // 設(shè)計(jì)稿的尺寸
full: true // 開啟雙向自適應(yīng)
});
// 背景使用%做額外處理保持充滿全屏
第四種場(chǎng)景：滾屏自適應(yīng)+靈活閥值的寬高雙向自適應(yīng)計(jì)算岳颇，如下面兩圖所示，左邊的寬高值比例是750/1334（彈框上面空余比較多） 颅湘，而右邊的寬高值比例是750／1050(寬高值比例閥值設(shè)置的僅本彈框高一點(diǎn)话侧，從而達(dá)到在小屏中的空間利用率最高)。這個(gè)高度閥值可以靈活運(yùn)用闯参。從而達(dá)到最佳體驗(yàn)瞻鹏。
左邊的：
// 左邊的
mcRatio({
el: document.getElementById('layer'), // 要縮放的元素（彈框）
size: [750, 1334], // 窗口寬高比，高度小于1334時(shí)開始縮放高度鹿寨。
full: true // 開啟雙向自適應(yīng)
});
右邊的：
// 右邊的
mcRatio({
el: document.getElementById('layer'), // 要縮放的元素（彈框）
size: [750, 1050], // 當(dāng)窗口寬高比新博，高度小于1050時(shí)才開始縮放高度。
full: true // 開啟雙向自適應(yīng)
});
第五種場(chǎng)景：全局自適應(yīng)+局部自適應(yīng)多重自適應(yīng)計(jì)算方案脚草，如下圖所示赫悄，頁面僅根據(jù)寬度自適應(yīng)，高度滾動(dòng)不用做自適應(yīng)馏慨，但是部份元素（比如下圖所示的彈框）又脫離全局自適應(yīng)可以獨(dú)立的進(jìn)行寬高雙向自適應(yīng)埂淮。這在眾多項(xiàng)目中都非常有用。【推薦写隶，成本性價(jià)比最高的方案】
// 全局的
mcRatio({
size: [750, 1050], // 當(dāng)窗口寬高比倔撞，高度小于1050時(shí)才開始縮放高度。
full: flase // 不開啟雙向自適應(yīng)
});
// 局部的（彈框的）
mcRatio({
el: document.getElementById('layer'), // 不設(shè)置時(shí)默認(rèn)為全局
size: [750, 1050], // 當(dāng)窗口寬高比樟澜，高度小于1050時(shí)才開始縮放高度误窖。
full: true // 開啟雙向自適應(yīng)
});
第六種場(chǎng)景：基礎(chǔ)自適應(yīng)叮盘，通過%單位或樣式做一些自適應(yīng)增強(qiáng)可以做到全屏無滾動(dòng)條，但是對(duì)設(shè)計(jì)與前端技術(shù)有雙重高要求霹俺，可能需要前端懂設(shè)計(jì)并且懂得無界設(shè)計(jì)理念柔吼。(無界設(shè)計(jì)是指設(shè)計(jì)與開發(fā)時(shí)需要考慮到在任何尺寸下的形態(tài)及自適應(yīng)過渡)
四、自適應(yīng)解決方案@fekit/mc-ratio
看過上面從基本到復(fù)雜的移動(dòng)端自適應(yīng)場(chǎng)景需求與演示丙唧，現(xiàn)在我正式向大家推薦@fekit/mc-ratio愈魏，這個(gè)插件可以幫助你做到上面所演示的各種簡單或復(fù)雜場(chǎng)景下的自適應(yīng)。是一套可以吊打淘寶的flexible.js方案的自適應(yīng)解決方案想际。
NPM: https://www.npmjs.com/package/@fekit/mc-ratio
GIT: https://gitlab.com/fekits/mc-ratio
如果在使用過程中遇到任何問題培漏，可以留言交流，謝謝胡本！
