TA貢獻(xiàn)361條經(jīng)驗(yàn) 獲得超191個(gè)贊
1、rem是一個(gè)相對單位，相對的是html上的字體大小，我看你例子里html上font-size是62.5%，62.5%*16px=10px，所以你的例子里所有rem是相對10px這個(gè)數(shù)值的;1rem=10px,2rem=20px；
2、設(shè)置百分比，百分比是根據(jù)父元素的數(shù)值，例子里<span>關(guān)閉</span>top:20%，是根據(jù)父元素<div class="header">的height來設(shè)置的;
psd的相對和css的相對不相同，所以先搞清楚相對誰，再去psd進(jìn)行測算；
TA貢獻(xiàn)158條經(jīng)驗(yàn) 獲得超188個(gè)贊
(function(){
??function?change()?{
????var?fs?=?document.documentElement.clientWidth/320*20;
????document.documentElement.style.fontSize?=?fs?+?'px';
??}
??window.addEventListener('resize',?change,?false);
??change();
})();
/*
這是我之前寫一個(gè)練習(xí)寫的調(diào)字體的函數(shù)，rem估計(jì)都差不多這樣調(diào)整吧，下面具體說
先設(shè)定：以320px屏幕寬度下1rem=20px為基準(zhǔn)?（為啥這么定在后面說）
????
var?fs?=?document.documentElement.clientWidth/320*20;
首先是弄清楚rem是什么，ｒｅｍ也就是根元素（html）的字號(hào)，你設(shè)置根元素的fontsize是多少像素1rem的值就是代表多少像素
然后是為什么要這樣算字號(hào)呢？
假如現(xiàn)在的實(shí)際屏幕寬度是640px，屏幕寬度比上基準(zhǔn)寬度（320），結(jié)果是基準(zhǔn)的2倍，那么1rem代表的值也應(yīng)該是基準(zhǔn)的兩倍，?屏幕寬/３２０?*?。玻埃穑?這樣就能算出不同屏幕寬時(shí)１ｒｅｍ應(yīng)該代表多少像素，然后好說了，
那么我寫樣式的時(shí)候只需要寫固定的ｒｅｍ值就行了，雖然寫的ｒｅｍ值是固定的，但是他代表的像素會(huì)隨著屏幕尺寸變化而變化
再然后就是樣式里該怎么算到底寫多少rem呢？
還是打個(gè)比方，假設(shè)你的設(shè)計(jì)圖也正好是３２０寬度，那就好算了，你直接用ｐｓ量，
量出一個(gè)ｄｉｖ的寬度是２０像素，那么樣式里就要寫20/20rem?就是１ｒｅｍ
量出它的margin是10像素，那么樣式里就寫?10/20rem?,?也就是?0.5rem
不用考慮什么百分比，只要用了rem那么整個(gè)頁面最好全都用rem，寫完你會(huì)發(fā)現(xiàn)不管屏幕尺寸怎么變，
各個(gè)元素和頁面的大小比例都是固定的，所占的位置比例也是固定的
如果設(shè)計(jì)圖不是320（你自己定的基準(zhǔn)寬）怎么辦？
那就先算出設(shè)計(jì)圖和你自己定的基準(zhǔn)寬度的比例，為了好算還是假定基準(zhǔn)寬是320，設(shè)計(jì)圖實(shí)際寬度是640px
那么算出比例是?640/320?=?2;?再算樣式里的rem值就應(yīng)該把ps量出來的寬度先除以這個(gè)比例再去除基準(zhǔn)的20像素
現(xiàn)在再去ps里測量，這時(shí)候如果又量出一個(gè)ｄｉｖ的寬度是２０像素，那么樣式里就要寫（20/2)/20rem?就是0.5ｒｅｍ
量出它的margin是10像素，那么樣式里就寫?(10/2)/20rem?,?也就是?0.25rem
最后一點(diǎn)基準(zhǔn)寬度和基準(zhǔn)的1rem=多少像素怎么定呢？
一般來說比較好的是按找你設(shè)計(jì)圖的一半定基準(zhǔn)屏幕寬度，比如設(shè)計(jì)圖640就定基準(zhǔn)寬320
基準(zhǔn)像素按里來說1rem=10px不是更好算嗎？?不過部分瀏覽器最低只支持12px的字體設(shè)置，所以最好設(shè)置大于12號(hào)的字體，怎么好算怎么定。
還有就是最好配合sass/less使用，提前把量出來的像素需要除去多少定個(gè)變量，寫樣式的時(shí)候直接就可以寫量出來的實(shí)際像素/變量了
還是一切條件還是按上面的例子的話，320的設(shè)計(jì)圖的情況，可以定個(gè)變量$scale?=?20rem;?（640的圖就是?$scale?=?(640/320)*20rem?)
然后你ps里量出是40像素就寫?div?{?width:?40?/?$scale;}?就可以了
（rem寫在變量那里是因?yàn)閟ass和less計(jì)算可以帶單位，這樣在寫樣式的時(shí)候就不用老寫rem了,很方便）
廢話有點(diǎn)多也不知道哪寫錯(cuò)沒，發(fā)現(xiàn)問題告訴我下~
*/舉報(bào)