明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

怎么讓移動端的頁面內(nèi)容自適應(yīng)

發(fā)表時間：2024-05-07 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這次給大家?guī)碓鯓幼屢苿佣说木W(wǎng)頁內(nèi)容自適應(yīng)，移動端的網(wǎng)頁內(nèi)容自適應(yīng)的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。終于完成了手頭的項目，失蹤人口又回歸啦！在做項目的過程中，遇到很多值得思考的點，速速道來。 第一個遇到的就是網(wǎng)頁大小自適應(yīng)的問題。目前比較常用的方法有：? 首先要讓頁面大小鋪滿屏幕又...
這次給大家?guī)碓鯓幼屢苿佣说木W(wǎng)頁內(nèi)容自適應(yīng)，移動端的網(wǎng)頁內(nèi)容自適應(yīng)的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

終于完成了手頭的項目，失蹤人口又回歸啦！在做項目的過程中，遇到很多值得思考的點，速速道來。 第一個遇到的就是網(wǎng)頁大小自適應(yīng)的問題。

目前比較常用的方法有：

? 首先要讓頁面大小鋪滿屏幕又不能溢出。只需要在html<head>標(biāo)簽內(nèi)加入viewport（如下），參數(shù)分別表示：頁面寬度＝ 屏幕寬度，最大和最小伸縮比都是1，不允許用戶拉縮。

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

? 百分比自適應(yīng)：把長度單位轉(zhuǎn)換為百分比來表示，這樣在不同的寬度下，元素的長寬也會隨之變化。

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

缺點：字體大小需要另外一套自適應(yīng)方法來調(diào)整；當(dāng)屏幕寬度大于700px后，繼續(xù)按照百分比元素會偏大，這個時候調(diào)整起來會比較麻煩。

?rem、em自適應(yīng) ：用媒體查詢的方法，確定在不同屏幕寬度下，改變<html>或<body>的fontsize。再用rem, em替代 px作為單位實現(xiàn)自適應(yīng)。

優(yōu)點：可以根據(jù)不同屏幕寬度來設(shè)置，可以完美解決上面說的屏幕偏大時的比例問題。字體的大小也不存在問題。

缺點：根據(jù)寬度區(qū)間來設(shè)置，無法實現(xiàn)無縫變換。

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

這些兼容方法各有優(yōu)缺點，都不算完美，怎樣才能把優(yōu)點結(jié)合在一起，同時避免缺點呢？

在參考淘寶網(wǎng)的自適應(yīng)方法時，偶然發(fā)現(xiàn)頁面<html>的fontsize會根據(jù)屏幕的寬度自動調(diào)整，而且屏幕寬度和所設(shè)字體大小的商是一定的。

于是猜想它是用JS獲取屏幕寬度后，按照固定比例縮小后作為rem的單位長度實現(xiàn)自適應(yīng)。

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

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

JS代碼寫起來非常簡單，而且完美解決了用rem來設(shè)置無法達(dá)到無縫銜接的問題。

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

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

最終代碼

Zepto(function($){   
    var win = window,   
        doc = document;   
  
    function setFontSize() {   
        var winWidth =  $(window).width();   
        // 640寬度以上進(jìn)行限制   
        var size = (winWidth / 640) * 100;   
        doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ;   
    };   
       
    //防止在html未加載完畢時執(zhí)行，保證獲取正確的頁寬   
    setTimeout(function(){   
        // 初始化   
        setFontSize();   
           
    }, 200);   
    
});

最后補(bǔ)充用rem做自適應(yīng)過程中發(fā)現(xiàn)的一個坑－－當(dāng)html設(shè)置較大的fontsize時，塊元素內(nèi)的行內(nèi)元素margin、padding會出現(xiàn)額外的值，解決辦法是把外面包的塊元素fontsize設(shè)置為0。

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

table表格中的內(nèi)容溢出應(yīng)該如何處理

怎么實現(xiàn)獲取textarea的動態(tài)剩余字?jǐn)?shù)

html關(guān)于PHP你必須知道的重要知識點

以上就是怎樣讓移動端的網(wǎng)頁內(nèi)容自適應(yīng)的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。