首頁(yè) 猿問想用rem給width與heigh...

想用rem給width與height進(jìn)行賦值時(shí)，該怎么計(jì)算呢？以誰(shuí)為參照物呢？

JavaScript

蝴蝶不菲 2019-04-10 20:48:06

rem在設(shè)置寬度和高度的時(shí)候，該怎么進(jìn)行計(jì)算呢？比如html{font-size:62.5%;}那么font-size:2rem;與font-size:20px是一樣的但是width:20rem與width:200px是不一樣的。所以，當(dāng)想用rem進(jìn)行width與height進(jìn)行設(shè)置時(shí)，該怎么計(jì)算呢？以誰(shuí)為參照物呢？

查看完整描述

2 回答

梵蒂岡之花

TA貢獻(xiàn)1900條經(jīng)驗(yàn) 獲得超5個(gè)贊

rem用來(lái)設(shè)置字體大小，也可以用于網(wǎng)格布局。rem中的r代表根元素，它的值就是根元素設(shè)置的字體大小。在大多數(shù)情況下，根元素就是html了。這個(gè)單位可以解決em設(shè)置字體時(shí)，由于繼承帶來(lái)的問題，具體如下：body{font-size:14px;}div{font-size:1.2em;//calculatedat14px*1.2,or16.8px}假設(shè)html存在這樣的結(jié)構(gòu)：TestTestTest
但是用rem能避免html{font-size:14px;}div{font-size:1.2rem;}這樣在上面的那三個(gè)嵌套的div的字體大小都是1.2*14px=16.8px了。在布局中，如下：.container{width:70rem;//70*14px=980px}參考文章

反對(duì) 回復(fù) 2019-04-10

德瑪西亞99

TA貢獻(xiàn)1770條經(jīng)驗(yàn) 獲得超3個(gè)贊

rem這個(gè)單位是相對(duì)于根元素的，是可以用來(lái)設(shè)置width和height的，只是計(jì)算的基準(zhǔn)是html標(biāo)簽的font-size值，這里建議html的font-size值用px，不要用百分比；不過呢html的font-size最好是通過js來(lái)動(dòng)態(tài)計(jì)算一個(gè)數(shù)值://-設(shè)置根元素fontSize~(function(doc,win){var_root=doc.documentElement,resizeEvent='orientationchange'inwindow?'orientationchange':'resize',resizeCallback=function(){varclientWidth=_root.clientWidth,fontSize=20;if(!clientWidth)return;if(clientWidth<640){fontSize=20*(clientWidth/320);}else{fontSize=20*(640/320);}_root.style.fontSize=fontSize+'px';};if(!doc.addEventListener)return;win.addEventListener(resizeEvent,resizeCallback,false);doc.addEventListener('DOMContentLoaded',resizeCallback,false);})(document,window);