終于完成了手頭的項目，失蹤人口又回歸啦！在做項目的過程中，遇到很多值得思考的點，速速道來。 第一個遇到的就是網頁大小自適應的問題。
目前比較常用的方法有：
• 首先要讓頁面大小鋪滿屏幕又不能溢出。只需要在html<head>標簽內加入viewport（如下），參數分別表示：頁面寬度＝ 屏幕寬度，最大和最小伸縮比都是1，不允許用戶拉縮。
XML/HTML Code
1.<meta name="viewport" content="width=device-width,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
• 百分比自適應：把長度單位轉換為百分比來表示，這樣在不同的寬度下，元素的長寬也會隨之變化。
優點：寬度之間無縫銜接， 操作起來也相對比較方便。
缺點：字體大小需要另外一套自適應方法來調整；當屏幕寬度大于700px后，繼續按照百分比元素會偏大，這個時候調整起來會比較麻煩。
•rem、em自適應 ：用媒體查詢的方法，確定在不同屏幕寬度下，改變<html>或<body>的fontsize。再用rem, em替代 px作為單位實現自適應。
優點：可以根據不同屏幕寬度來設置，可以完美解決上面說的屏幕偏大時的比例問題。字體的大小也不存在問題。
缺點：根據寬度區間來設置，無法實現無縫變換。
--------------------------------------------------------------------------------
這些兼容方法各有優缺點，都不算完美，怎樣才能把優點結合在一起，同時避免缺點呢？
在參考淘寶網的自適應方法時，偶然發現頁面<html>的fontsize會根據屏幕的寬度自動調整，而且屏幕寬度和所設字體大小的商是一定的。
于是猜想它是用JS獲取屏幕寬度后，按照固定比例縮小后作為rem的單位長度實現自適應。
這不就是優點全有滴解決方法嗎??？請容許我激動一下下(☆_☆)
--------------------------------------------------------------------------------
JS代碼寫起來非常簡單，而且完美解決了用rem來設置無法達到無縫銜接的問題。
但移動端測試后問題就出現了，移動端safari在html加載完畢之前將JS以迅雷不及掩耳盜鈴之勢執行了，在頁面沒有按照viewport設置好寬度前，JS就讀取了錯誤的寬度，導致元素變成原來的兩倍大0^0, 需要用setTimeout()解決問題。
--------------------------------------------------------------------------------
最終代碼
JavaScript Code
1.Zepto(function($){
2. var win = window,
3. doc = document;
4.
5. function setFontSize() {
6. var winWidth = $(window).width();
7. // 640寬度以上進行限制
8. var size = (winWidth / 640) * 100;
9. doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ;
10. };
11.
12. //防止在html未加載完畢時執行，保證獲取正確的頁寬
13. setTimeout(function(){
14. // 初始化
15. setFontSize();
16.
17. }, 200);
18.
19.});
最后補充用rem做自適應過程中發現的一個坑－－當html設置較大的fontsize時，塊元素內的行內元素margin、padding會出現額外的值，解決辦法是把外面包的塊元素fontsize設置為0。
以上這篇移動端網頁大小自適應的實現方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
