移動端web app自適應布局探索與總結

這樣做的弊端很明顯：

做出來的頁面在各種手機端看起來的物理大小（高度）是一樣的，所以在大屏手機會覺得頁面稍小，小屏手機頁面稍大

如果要使高度能更好的適應各種手機螢幕，需要寫太多的**查詢樣式，效率低下

全屏背景跟頁面元素需要耦合時，元素位置的確定尤為困難（可能需要通過百分比去確定元素的橫向位置，但始終會有誤差）

網易跟**的方案介紹在上面流雲諸葛的文章中已經寫的很清楚了，建議可以先看看那篇文章再閱讀下面我所說的，可能會更加清晰。

（1）方案的簡單介紹: 基於rem

前提：頁面元素的布局尺寸全都以設計稿為基準等比例設定。

給html根節點設定乙個基礎font-size值，然後頁面的所有元素布局均相對於該font-size值採用rem單位設定。那麼基礎的font-size值該如何取呢？

假如通過**查詢設定font-size，只能解決一部分的情況，而且並不能完成適配，因為手機螢幕寬度型別實在太多了，所以font-size的取值要通過js計算，取當前viewport的devicewidth與設計稿的寬的比例值，例如：我們的設計稿尺寸都是640px的，iphone5的devicewidth是320px，那麼計算出來的font-size值就是 320 / 640 = 0.5，因為得出的font-size太小，不方便計算，且有的瀏覽器可能不相容太小字型大小，所以將font-size放大100倍，所以最終計算出來的font-size為 320 / 640 * 100 = 50(px); 當然，這個值是根據設計稿來計算的，所以根據計算規則，下面列出幾種常見設計稿相應的font-size值：

devicewidth = 320，font-size = 320 / 6.4 = 50px

devicewidth = 375，font-size = 375 / 6.4 = 58.59375px

devicewidth = 414，font-size = 414 / 6.4 = 64.6875px

devicewidth = 500，font-size = 500 / 6.4 = 78.125px

可在script標籤加上如下**

(function () , false);
})();
// 這個6.4就是根據設計稿的橫向寬度來確定的，假如你的設計稿是750
// 那麼 html.style.fontsize = windowwidth / 7.5 + 'px';

至此，font-size的基礎值就確定好了，而且知道該font-size值是手機devicewidth跟設計稿的比例值的 100倍（重要）（2）那麼頁面元素該如何設定寬高、邊距...

例如：乙個設計稿寬高為140px的圖示，左邊距為50px，那麼它的css應該這樣寫

.icon

因為html的font-size是放大了100倍，所以計算rem時，要用設計稿的實際畫素除以100，140px / 100 = 1.4rem; 最後實際的畫素大小就會由devicewidth跟設計稿的橫向寬的比例自動計算出來。

如圖iphone5下面的效果：

iphone6的效果：

可以看出來：html的font-size動態根據devicewidth改變，圖示的寬高、邊距等也根據font-size動態按比例變化，大功告成了？不對，相信機智的你已經看到貌似在iphone6的下有的圖示背景錯位了。。是的，這暴露出了乙個背景使用雪碧圖的乙個弊端（由於font-size小數點太多，計算出實際背景圖大小background-size跟背景圖位置background-position時瀏覽器精度不夠可能就會出現位置的偏差（我猜的），這個後面還會詳細講解決方案）

到這裡，設定寬高、邊距等都ok了，接下來...

（3）其他元素的字型大小該如何設定？

@media screen and (max-width: 320px) 
}@media screen and (min-width: 321px) and (max-width: 413px) 
}@media screen and (min-width: 414px) and (max-width: 639px) 
}@media screen and (min-width: 640px) 
}

可為什麼不用rem呢？後來去查了一番資料，發現有一種叫做點陣字型的存在（什麼是點陣字型），也叫作位圖字型，位圖我們都知道，跟向量圖是有區別的，就是放大會模糊，所以點陣字型也是放大會模糊的，如果根據rem設定字型大小，字型會自由縮放，可能就會導致點陣字型模糊，所以需要設定使用幾種固定大小的字型。不過，在正常情況下，系統自帶的字型都是向量字型，所以使用rem為單位是沒有問題的，除非你的網頁需要用到特殊的點陣字型。

總結：如果網頁沒有用到特殊的點陣字型，字型單位使用rem，如果用到了點陣字型，字型需要通過**查詢設定幾種固定大小的字型

（4）關於背景的錯位問題

上面已經發現了，通過換算rem設定background-size跟background-position的時候，在一些手機型號下會出現背景圖錯位的情況，可是如果不用rem設定的話，又不能達到適配的目的。（background-size、background-position的rem換算方法跟前面講的寬高設定一樣，都是設計稿尺寸（這時應該是雪碧圖的原始尺寸）除以100倍）

最後經過嘗試，得出了幾種解決方案：

1、如圖（推薦方案）：

圖示的樣式

.icon .icon3

解決方法，如圖：

**如下：

.icon-fix .icon-fix:after .icon3:after

2、不使用雪碧圖，使用單個背景圖，這個時候就不存在background-position的需要，只需設定background-size: contain;即可，這樣做的弊端就在於無法使用雪碧圖，請求增多，適用於頁面圖示較少的情況

3、使用巢狀img標籤，通過絕對定位模擬background-position，具體請看 responsive-sprites，這種做法需要更多的標籤，且img只能放圖示尺寸大小一樣的雪碧圖，而且不能通過**查詢使用多倍圖

以上3中解決方案第一種最優，當然有些特殊情況可能需要按需選擇！

最後發現一篇研究rem產生小數點畫素的問題的文章，感興趣的可戳《rem 產生的小數畫素問題》

感謝你的閱讀！

移動端web app自適應布局探索與總結

移動端webapp自適應布局

移動端web app自適應布局探索與總結

移動端自適應布局

移動端web app自適應布局探索與總結

移動端webapp自適應布局

移動端web app自適應布局探索與總結

移動端自適應布局

相關推薦