如何讓移動(dòng)端的頁(yè)面內(nèi)容自適應(yīng)
發(fā)表時(shí)間：2023-09-22 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這次給大家?guī)?lái)怎樣讓移動(dòng)端的網(wǎng)頁(yè)內(nèi)容自適應(yīng)，移動(dòng)端的網(wǎng)頁(yè)內(nèi)容自適應(yīng)的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。終于完成了手頭的項(xiàng)目，失蹤人口又回歸啦！在做項(xiàng)目的過(guò)程中，遇到很多值得思考的點(diǎn)，速速道來(lái)。 第一個(gè)遇到的就是網(wǎng)頁(yè)大小自適應(yīng)的問(wèn)題。目前比較常用的方法有：? 首先要讓頁(yè)面大小鋪滿屏幕又...
這次給大家?guī)?lái)怎樣讓移動(dòng)端的網(wǎng)頁(yè)內(nèi)容自適應(yīng)，移動(dòng)端的網(wǎng)頁(yè)內(nèi)容自適應(yīng)的
注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。
終于完成了手頭的項(xiàng)目，失蹤人口又回歸啦！在做項(xiàng)目的過(guò)程中，遇到很多值得思考的點(diǎn)，速速道來(lái)。 第一個(gè)遇到的就是網(wǎng)頁(yè)大小自適應(yīng)的問(wèn)題。
目前比較常用的方法有：
? 首先要讓頁(yè)面大小鋪滿屏幕又不能溢出。只需要在html<head>標(biāo)簽內(nèi)加入viewport（如下），參數(shù)分別表示：頁(yè)面寬度＝ 屏幕寬度，最大和最小伸縮比都是1，不允許用戶拉縮。
<meta name="viewport" content="width=device-width,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
? 百分比自適應(yīng)：把長(zhǎng)度單位轉(zhuǎn)換為百分比來(lái)表示，這樣在不同的寬度下，元素的長(zhǎng)寬也會(huì)隨之變化。
優(yōu)點(diǎn)：寬度之間無(wú)縫銜接， 操作起來(lái)也相對(duì)比較方便。
缺點(diǎn)：字體大小需要另外一套自適應(yīng)方法來(lái)調(diào)整；當(dāng)屏幕寬度大于700px后，繼續(xù)按照百分比元素會(huì)偏大，這個(gè)時(shí)候調(diào)整起來(lái)會(huì)比較麻煩。
?rem、em自適應(yīng) ：用媒體查詢的方法，確定在不同屏幕寬度下，改變<html>或<body>的fontsize。再用rem, em替代 px作為單位實(shí)現(xiàn)自適應(yīng)。
優(yōu)點(diǎn)：可以根據(jù)不同屏幕寬度來(lái)設(shè)置，可以完美解決上面說(shuō)的屏幕偏大時(shí)的比例問(wèn)題。字體的大小也不存在問(wèn)題。
缺點(diǎn)：根據(jù)寬度區(qū)間來(lái)設(shè)置，無(wú)法實(shí)現(xiàn)無(wú)縫變換。
--------------------------------------------------------------------------------
這些兼容方法各有優(yōu)缺點(diǎn)，都不算完美，怎樣才能把優(yōu)點(diǎn)結(jié)合在一起，同時(shí)避免缺點(diǎn)呢？
在參考淘寶網(wǎng)的自適應(yīng)方法時(shí)，偶然發(fā)現(xiàn)頁(yè)面<html>的fontsize會(huì)根據(jù)屏幕的寬度自動(dòng)調(diào)整，而且屏幕寬度和所設(shè)字體大小的商是一定的。
于是猜想它是用JS獲取屏幕寬度后，按照固定比例縮小后作為rem的單位長(zhǎng)度實(shí)現(xiàn)自適應(yīng)。
這不就是優(yōu)點(diǎn)全有滴解決方法嗎��？請(qǐng)容許我激動(dòng)一下下(☆_☆)
--------------------------------------------------------------------------------
JS代碼寫起來(lái)非常簡(jiǎn)單，而且完美解決了用rem來(lái)設(shè)置無(wú)法達(dá)到無(wú)縫銜接的問(wèn)題。
但移動(dòng)端測(cè)試后問(wèn)題就出現(xiàn)了，移動(dòng)端safari在html加載完畢之前將JS以迅雷不及掩耳盜鈴之勢(shì)執(zhí)行了，在頁(yè)面沒(méi)有按照viewport設(shè)置好寬度前，JS就讀取了錯(cuò)誤的寬度，導(dǎo)致元素變成原來(lái)的兩倍大0^0, 需要用setTimeout()解決問(wèn)題。
--------------------------------------------------------------------------------
最終代碼
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未加載完畢時(shí)執(zhí)行，保證獲取正確的頁(yè)寬
setTimeout(function(){
// 初始化
setFontSize();
}, 200);
});最后補(bǔ)充用rem做自適應(yīng)過(guò)程中發(fā)現(xiàn)的一個(gè)坑－－當(dāng)html設(shè)置較大的fontsize時(shí)，塊元素內(nèi)的行內(nèi)元素margin、padding會(huì)出現(xiàn)額外的值，解決辦法是把外面包的塊元素fontsize設(shè)置為0。
相信看了這些案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
相關(guān)閱讀：
table表格中的內(nèi)容溢出應(yīng)該如何處理
怎么實(shí)現(xiàn)獲取textarea的動(dòng)態(tài)剩余字?jǐn)?shù)
html關(guān)于PHP你必須知道的重要知識(shí)點(diǎn)
以上就是怎樣讓移動(dòng)端的網(wǎng)頁(yè)內(nèi)容自適應(yīng)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
