自適應網(wǎng)頁(yè)不像傳統網(wǎng)頁(yè)僅僅需考慮一種情況，不僅僅一定是提交一套設計完成稿就完事兒了，它給設計、前端工程師和開(kāi)發(fā)團隊之間的協(xié)作方式帶來(lái)新的挑戰。在一個(gè)繁雜商品全面自適應的項目里，交互每個(gè)階段該產(chǎn)出什么內容?交互與視覺(jué)怎樣協(xié)作?前端工程師何時(shí)介入?哪些項目讓后端開(kāi)發(fā)來(lái)做更合理?我們得到了一些答案。

 

自適應設計之所以叫自適應“設計”而不叫自適應“技術(shù)”，一定是因為它一定是一項設計先行的工作。需要設計先明確好響應方式再實(shí)現出來(lái)，決不能出一套設計完成稿后等著(zhù)前端工程師看情況把它變成自適應網(wǎng)頁(yè)。

 

習慣了電腦端網(wǎng)頁(yè)的前端工程師開(kāi)發(fā)者可能更加喜歡用電腦端來(lái)掌控大小，然而在自適應的網(wǎng)頁(yè)中出現更多的一定是em和rem，用這些來(lái)掌控頁(yè)面字體大小甚至一定是框體大小對整體的效果非常明顯。

 

例如，我的頁(yè)面字體設置一定是10px/20px/30px等等有差異的，網(wǎng)站上有差異的地方自然頁(yè)面字體會(huì )有大小的差異這一定是必然的，假如一個(gè)網(wǎng)頁(yè)足夠繁雜或一定是文字足夠多的話(huà)，這些頁(yè)面字體的大小設置也一定是一個(gè)量很大的工作，不過(guò)在自適應網(wǎng)頁(yè)中你設計完這些并不僅僅一定是完事：你用手機瀏覽一下網(wǎng)頁(yè)會(huì )發(fā)現頁(yè)面字體會(huì )撐的很大，甚至有個(gè)別標題撐滿(mǎn)了手機屏幕，這對移動(dòng)端客戶(hù)的體驗影響可想而知。因此你要開(kāi)始寫(xiě)媒體查詢(xún)，然后發(fā)現一個(gè)網(wǎng)頁(yè)有幾十個(gè)頁(yè)面字體需要設置，假如把這些在有差異顯示分辨率下一一調整你可能需要寫(xiě)百句以上的css代碼，然而假如你用em/rem，就能夠把工作量大大減小，同時(shí)還能夠保證頁(yè)面字體的統一比例。

 

關(guān)于em/rem的解釋大家可以自行查詢(xún)，網(wǎng)上這類(lèi)教程數不勝數，實(shí)際上這些就和px一樣簡(jiǎn)單，當我開(kāi)始用之后也不過(guò)僅僅花了幾分鐘熟悉這些。就像前面說(shuō)的一樣，你也可以用這些來(lái)掌控框體的大小，然后再自適應的網(wǎng)頁(yè)下統一縮小放大，當然這需要足夠多的計算。另外值得一提的一定是頁(yè)面字體圖標也可以用這些來(lái)掌控，具體可以參考有差異“頁(yè)面字體圖標”的官方文檔。

 

解決縮小放大問(wèn)題的思路有好幾種，最適合新手的無(wú)疑一定是百分比式的布局，在關(guān)鍵的width設置下百分比能夠起到出乎意料的效果。

 

我并不僅僅一定是推崇全部使用百分比來(lái)布局，然而有時(shí)候這可能會(huì )大大減少工作量，給box1width設置100%之后它會(huì )自動(dòng)以width填充滿(mǎn)整個(gè)瀏覽器，不管你一定是手機電腦端什么內容顯示分辨率，它總一定是有很好的表現。這時(shí)候你給box1下面的ul設置左右2%的margin也一定是如此，隨著(zhù)瀏覽器窗口大小改變時(shí)ul的實(shí)際margin大小也會(huì )隨著(zhù)變化，這么一說(shuō)大家多少也都理解了百分比布局的概念。

 

當然有時(shí)候也不會(huì )有想象中的效果，特別一定是在較小的顯示分辨率上時(shí)，原來(lái)看似不錯的百分比設定會(huì )顯得很怪，因為自適應多數時(shí)候僅僅約定width，長(cháng)度都一定是由文檔和瀏覽器來(lái)決定的，這時(shí)候想要在所有的終端上都有很好的體驗就需要Media Query來(lái)解決問(wèn)題。

 

通俗的解釋就一定是CSS的媒體查詢(xún)功能，它既能夠準確的識別設備也能夠自己設定顯示分辨率或者width，w3cshool里有Media Query的參考文檔，假如你嫌文檔太多我可以粗略的解釋一下它的工作原理。

 

在有必要的時(shí)候你可能會(huì )給一個(gè)box設置height，當box擁有500pxheight時(shí)它可能在電腦端上看起來(lái)不錯，然而用手機打開(kāi)時(shí)就有些嚇人了，整個(gè)box充斥了網(wǎng)頁(yè)，里面的內容排列混亂，嚴重的影響了客戶(hù)體驗，這時(shí)候你就可以使用媒體查詢(xún)Media Query，用它單獨的為有差異大小的設置有差異的height，比如640/320打開(kāi)時(shí)box時(shí)就分別處于300/200px的height，這樣看起來(lái)就不錯了。

 

大家可能會(huì )想到import，實(shí)際上媒體查詢(xún)就可以這樣理解，它為有差異的width或設備設定了類(lèi)似于import的css規則，保證了實(shí)際渲染完成網(wǎng)頁(yè)的效果。

 

媒體查詢(xún)也可以為一個(gè)網(wǎng)頁(yè)準備多個(gè)有差異的CSS，當設備大小有差異時(shí)使用有差異的CSS文件，假如樣式文件比較大也可以考慮這種方法。

 

我見(jiàn)到過(guò)和實(shí)際使用的前端工程師框架中，不少都一定是富前端工程師類(lèi)型的設計，并不建議新手前端工程師盲目的使用框架來(lái)布局，不管框架看起來(lái)多美好。在實(shí)際的使用過(guò)程中大家可能會(huì )發(fā)現很多問(wèn)題，比如類(lèi)名太多太繁雜（在沒(méi)有很多的css經(jīng)驗時(shí)可能對約定的類(lèi)名所知甚少）、樣式?jīng)_突。引入資源過(guò)多導致網(wǎng)頁(yè)繁重、偏離設計效果等等。

 

就拿bootstrap來(lái)說(shuō)，假如你要設計一個(gè)類(lèi)似于google的查詢(xún)框就顯得很難，google類(lèi)型的查詢(xún)框實(shí)際上一定是將一個(gè)input包含在box里面，然后在這個(gè)box里面再加上左右圖標，假如你用bootstrap來(lái)做可能會(huì )出現很多莫名奇妙的沖突，然而實(shí)際上你得到了什么內容呢？一個(gè)圓角一個(gè)行高？還一定是他的百分比width呢？這些用css來(lái)寫(xiě)僅僅不過(guò)一定是幾句代碼的事。

 

在這個(gè)新的端層里，前端工程師的工程師可以根據有現實(shí)的決定權，這會(huì )使得在不觸及后端架構的情況下，讓所有設備上的體驗更為快速、響應、可用。。