css3 - 想用rem給width與height進(jìn)行賦值時(shí)，該怎么計(jì)算呢？以誰(shuí)為參照物呢？
問(wèn)題描述
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í)為參照物呢？
問(wèn)題解答
回答1：rem用來(lái)設(shè)置字體大小，也可以用于網(wǎng)格布局。rem中的r代表根元素，它的值就是根元素設(shè)置的字體大小。在大多數(shù)情況下，根元素就是html了。這個(gè)單位可以解決em設(shè)置字體時(shí)，由于繼承帶來(lái)的問(wèn)題，具體如下：
body { font-size: 14px;}p { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px}
假設(shè)html存在這樣的結(jié)構(gòu)：
<body> <p>Test <!-- 14 * 1.2 = 16.8px --><p> Test <!-- 16.8 * 1.2 = 20.16px --> <p>Test <!-- 20.16 * 1.2 = 24.192px --> </p></p> </p></body>
但是用rem能避免
html { font-size: 14px;}p { font-size: 1.2rem;}
這樣在上面的那三個(gè)嵌套的p的字體大小都是 1.2*14px = 16.8px 了。在布局中，如下：
.container { width: 70rem; // 70 * 14px = 980px}
參考文章
回答2：rem這個(gè)單位是相對(duì)于根元素的，是可以用來(lái)設(shè)置width和height的，只是計(jì)算的基準(zhǔn)是html標(biāo)簽的font-size值，這里建議html的font-size值用px，不要用百分比； 不過(guò)呢html的font-size最好是通過(guò)js來(lái)動(dòng)態(tài)計(jì)算一個(gè)數(shù)值:
//- 設(shè)置根元素fontSize~(function (doc, win) { var _root = doc.documentElement,resizeEvent = ’orientationchange’ in window ? ’orientationchange’ : ’resize’,resizeCallback = function () { var clientWidth = _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);回答3：
其中的rem原理我就不說(shuō)了，我想說(shuō)的就是，rem,真的不能用在height和width中, 在height和width中，一般情況下使用百分比就可以了. 在width里面使用rem的話，你會(huì)發(fā)現(xiàn)， 他計(jì)算出來(lái)的數(shù)值，和你想要的不一樣.舉個(gè)例子吧: 當(dāng)你在html里面設(shè)置的font-size為10px的話，
html{ font-size:10px;}p{ font-size:2rem; //得到的結(jié)果是20px 你會(huì)微微一笑,艸，你騙我呢. 不急，show u code}p{ height: 2rem; //這時(shí)候，請(qǐng)打開(kāi)你的控制臺(tái)，觀察p的高度,你會(huì)發(fā)現(xiàn)是24px;TM!!!怎么不是20px呢}
原理就是， font-size 對(duì)于height 和 width 而言最小值是 12px, 而對(duì)于font-size而言， 你想設(shè)多少，就設(shè)置多少。 這個(gè)無(wú)可厚非。咳咳~~所以綜上所述: 在height 里面一般使用 百分比就夠了(你整個(gè)12px 你自己也不好計(jì)算呀,而且如果動(dòng)態(tài)的時(shí)候真的給你整個(gè) <12px的，到時(shí)候哭都來(lái)不及).在font-size里面，最好就使用rem， 因?yàn)檫@個(gè)單位是專門(mén)為他開(kāi)發(fā)的.
回答4：呵呵，rem只是用來(lái)設(shè)置字體大小，沒(méi)有誰(shuí)告訴你rem可以設(shè)置width和height
網(wǎng)公網(wǎng)安備