怎樣讓行動端的網頁內容自適應-html教學-PHP中文網

怎樣讓行動端的網頁內容自適應

php中世界最好的语言

發布： 2018-01-23 10:34:01

原創

2852 人瀏覽過

這次帶給大家怎樣讓行動端的網頁內容自適應，行動端的網頁內容自適應的注意事項有哪些，以下就是實戰案例，一起來看一下。

終於完成了手邊的項目，失蹤人口又回歸啦！在做專案的過程中，遇到很多值得思考的點，速速道來。第一個遇到的就是網頁大小自適應的問題。

目前比較常用的方法有：

• 首先要讓頁面大小鋪滿螢幕又不能溢出。只需要在html標籤內加入viewport（如下），參數分別表示：頁寬＝螢幕寬度，最大和最小伸縮比都是1，不允許使用者拉縮。

<meta name="viewport" content="width=device-width,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

登入後複製

• 百分比自適應：把長度單位轉換成百分比來表示，這樣在不同的寬度下，元素的長寬也會隨之改變。

優點：寬度之間無縫銜接，操作起來也相對比較方便。

缺點：字體大小需要另外一套自適應方法來調整；當螢幕寬度大於700px後，繼續按照百分比元素會偏大，這個時候調整起來會比較麻煩。

•rem、em自適應：用媒體查詢的方法，決定在不同螢幕寬度下，改變或的fontsize。再用rem, em取代 px作為單位實現自適應。

優點：可以根據不同螢幕寬度來設置，可以完美解決上面說的螢幕偏大時的比例問題。字體的大小也不存在問題。

缺點：根據寬度區間來設置，無法實現無縫變換。

-------------------------------------------- ------------------------------------

這些相容方法各有優缺點，都不算完美，怎樣才能把優點結合在一起，同時避免缺點呢？

在參考淘寶網的自適應方法時，偶然發現頁面的fontsize會根據螢幕的寬度自動調整，而且螢幕寬度和所設字體大小的商數是一定的。

於是猜想它是用JS獲取螢幕寬度後，按照固定比例縮小後作為rem的單位長度實現自適應。

這不就是優點全有滴解決方法嗎！？請容許我激動一下下(☆_☆)

--------------------------------- ----------------------------------------------

#JS程式碼寫起來非常簡單，而且完美解決了用rem來設定無法達到無縫銜接的問題。

但行動端測試後問題就出現了，行動端safari在html載入完畢之前將JS以迅雷不及掩耳盜鈴之勢執行了，在頁面沒有按照viewport設定好寬度前，JS就讀取了錯誤的寬度，導致元素變成原來的兩倍大0^0, 需要用setTimeout()解決問題。

-------------------------------------------- ------------------------------------

最終程式碼

Zepto(function($){   
    var win = window,   
        doc = document;   
  
    function setFontSize() {   
        var winWidth =  $(window).width();   
        // 640宽度以上进行限制   
        var size = (winWidth / 640) * 100;   
        doc.documentElement.style.fontSize = (size < 100 ? size : 100) + &#39;px&#39; ;   
    };   
       
    //防止在html未加载完毕时执行，保证获取正确的页宽   
    setTimeout(function(){   
        // 初始化   
        setFontSize();   
           
    }, 200);   
    
});

登入後複製

最後補充用rem做自適應過程中發現的一個坑－當html設定較大的fontsize時，塊元素內的行內元素margin、padding會出現額外的值，解決方法是把外麵包的塊元素fontsize設定為0。

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！