移動端布局js動態計算rem動態設定頁面的字型大小

2021-08-20 22:43:34 字數 3214 閱讀 6919

var html = document.documentelement;

var htmlw = html.clientwidth;

html.style.fontsize = htmlw / 10.8 + "px";

var pixelratio = 1 / window.devicepixelratio;

console.log(window.devicepixelratio); //畫素比

document.write(

''); //動態設定視口

function setsize()

setsize();

window.addeventlistener("resize", setsize, false); //自動跳轉不需要重新整理頁面

window.addeventlistener("orientationchange", setsize, false);

引入後:除以100並將px換成rem

假設設計妹妹給我們的設計稿尺寸為750 * 1340。結合網易、**移動端首頁html元素上的動態font-size屬性、設計稿尺寸、前端與設計之間協作流程一般分為下面兩種:

引入:頁面開頭處引入下面這段**,用於動態計算font-size 引入後:除以100並將px換成rem

(function(doc, win) 

// 乘以100,px : rem = 100 : 1

docel.style.fontsize = 100 * (width / 750) + 'px';

};recalc()

if (!doc.addeventlistener) return;

win.addeventlistener(resizeevt, recalc, false);

})(document, window);

使用:

未引入前:

body
引入後:除以100並將px換成rem

body
換算的依據:

// 乘以100,px : rem = 100 : 1

var recalc = function()

// 乘以100,px : rem = 100 : 1

docel.style.fontsize = 100 * (width / 750) + 'px';

};

引入:頁面開頭處引入下面這段**,用於動態計算font-size,或者單獨放入乙個檔案,引入檔案也可以

;

(function(win, lib) );

if (metael)

} else if (flexibleel)

if (maximumdpr) }}

if (!dpr && !scale) else if (devicepixelratio >= 2 && (!dpr || dpr >= 2)) else

} else

scale = 1 / dpr;

}docel.setattribute('data-dpr', dpr);

if (!metael) else

}function refreshrem()

var rem = math.floor(100 * (width / 750));

docel.style.fontsize = rem + 'px';

flexible.rem = win.rem = rem;

}win.addeventlistener('resize', function() , false);

win.addeventlistener('pageshow', function(e)

}, false);

if (doc.readystate === 'complete') else , false);

}refreshrem();

flexible.dpr = win.dpr = dpr;

flexible.refreshrem = refreshrem;

flexible.rem2px = function(d)

return val;

}flexible.px2rem = function(d)

return val;

}})(window, window['lib'] || (window['lib'] = {}));

使用:

未引入前:

body
引入後:

@font-size-base: 75;

body

換算依據:

function refreshrem() 

var rem = math.floor(width / 10);

docel.style.fontsize = rem + 'px';

flexible.rem = win.rem = rem;

}

這邊是用的less,如果您沒有用less,就需要手動計算,當然也可以轉化為px : rem = 100 : 1。

如果想轉化為px : rem = 100 : 1,可以修改上面的refreshrem函式:

function refreshrem() 

var rem = math.floor(100 * (width / 750))

docel.style.fontsize = rem + 'px'

flexible.rem = win.rem = rem;

}

使用:

未引入前:

body
引入後:除以100並將px換成rem

body
換算依據就是上面修改的**:

function refreshrem() 

var rem = 100 * (width / 750)

docel.style.fontsize = rem + 'px'

flexible.rem = win.rem = rem;

}

移動端rem布局

時隔半年,再次回顧移動端開發,感覺自己又張知識了 我們平常用的較多的單位是px,百分比,rem,em,vw,vh,但是在移動端用的比較多的還是rem,但是他在用的過程中要注意什麼呢,怎麼用呢,下面就開始啦。他是乙個度量單位,可以用他作為高寬,字型的單位。他以html中設定font size的大小為基...

rem移動端布局

1 rem是css3新增的相對長度單位,是指相對於根元素html的font size計算值的大小。簡單可理解為螢幕寬度的百分比。2 什麼是dpr?dpr是螢幕畫素密碼比 計算 dpr 液晶螢幕px尺寸 物理尺寸 量多少就是多少 常用的dpr有 dpr 2,dpr 3 window.devicepix...

移動端rem布局

什麼是rem rem是css3新增的乙個相對單位 root em,根em 這個單位與em有什麼區別呢?區別在於使用rem為元素設定字型大小時,仍然是相對大小,但相對的只是html根元素。em 作為font size的單位時,其代表父元素的字型大小,em作為其他屬性單位時,代表自身字型大小 mdn r...