js移動端自適應代碼（js移動端自適應代碼怎麼用）

本文目錄一覽：

• 1、Js動態設置rem來實現移動端字體的自適應代碼
• 2、織夢網站移動端自適應代碼，頭部、首頁輪播圖顯示不完全，求解
• 3、如何利用rem在移動端不同設備上讓字體自適應大小

Js動態設置rem來實現移動端字體的自適應代碼

下面一段代碼給大家介紹了Js動態設置rem來實現移動端字體的自適應，以此做個記錄，方便以後需要，感興趣的朋友一起看看吧。

具體代碼如下所示：

//設置根元素字體

var

win

=

window,

doc

=

document;

function

setFontSize()

{

var

winWidth

=

$(window).width();

//750這個數字是根據你的設計圖的實際大小來的，所以值具體根據設計圖的大小

var

size

=

(winWidth

/

750)

*

100;

doc.documentElement.style.fontSize

=

(size

100

?

size

:

100)

+

‘px’;

};

//這裡我們給個定時器來實現頁面加載完畢再進行字體設置

setTimeout(function()

{

//初始化

setFontSize();

},

100);

以上所述是小編給大家介紹的Js動態設置rem來實現移動端字體的自適應代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

織夢網站移動端自適應代碼，頭部、首頁輪播圖顯示不完全，求解

直接去懶人圖庫找個相近的輪播樣式，別上網站上直接複製，網站上應用的輪播圖片都是引用的js和css文件，沒有css輪播樣式執行不了，沒有js輪播也無法生效。

如何利用rem在移動端不同設備上讓字體自適應大小

1

2

html{font-size：62.5%}

body{font-size：1.2rem}

對於上面的代碼了解過rem的人基本也知道什麼意思，這樣的結果就是1.2rem=12px，但是在項目中使用rem作為字體單位時並沒有什麼卵用，萬能的百度教會了rem這個單位，卻並沒有教會我如何使用他，好吧自己摸索吧，然後就有了下面這個js代碼

(function (doc, win) {

// html

var docEl = doc.documentElement,

resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’, recalc = function () {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

clientWidth = (clientWidth 768 ) ? 768 : clientWidth ; docEl.style.fontSize = 10 * (clientWidth / 375 ) + ‘px’;

};

if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false);

recalc();

})(document, window);

/*移動端適應大小*/

使用時建議單獨建一個js包，要用直接引用就行，引入上面 的js代碼後，字體和高度使用rem作為單位，寬帶設為百分比，項目在不同的移動端設備就會自動適應屏幕啦