寫在前面的話：本文介紹的是通過rem + js動(dòng)態(tài)設(shè)置根元素的字體大小來實(shí)現(xiàn)網(wǎng)頁自適應(yīng)。
問題一：很多小伙伴為了px和rem轉(zhuǎn)化的方便，所以經(jīng)常把根元素的字體大小設(shè)為10px,即1rem = 10px;px轉(zhuǎn)化成rem只需要除以10即可。沒錯(cuò)，這在移動(dòng)端中是不會有任何毛病的，但在pc端上就會出現(xiàn)一些異常，瀏覽器往往并不會根據(jù)1rem = 10px去計(jì)算你頁面上的大小，而是以1rem = 12px 或者是1rem = 16px去計(jì)算，這是因?yàn)樵趐c端的瀏覽器中默認(rèn)的最小字體大小是12px? or? 16px（IE、google為12px，火狐為16px）
解決方法：把根元素html的font-size設(shè)為100px；然后在body里設(shè)置font-size：10%
問題二：有很多網(wǎng)頁是在一屏內(nèi)顯示的，做自適應(yīng)頁面的話就需要實(shí)現(xiàn)在不同屏幕大小的情況下都要居中顯示，這樣才看起來合理
解決方法：可以在每一屏內(nèi)設(shè)置一個(gè)“內(nèi)容包含框”，該“內(nèi)容包含框”需要在一屏中上下左右居中，然后屏上顯示的內(nèi)容弄就根據(jù)"內(nèi)容包含塊"進(jìn)行定位，這樣不管瀏覽器可視區(qū)域多大，內(nèi)容都會居中顯示
問題三：當(dāng)瀏覽器窗口變化時(shí),內(nèi)容的大小以及相對位置也要相應(yīng)變化
解決方法：這個(gè)依靠JS修改HTML的FONT-SIZE值實(shí)現(xiàn).如下:
$(window).resize(function ()// 綁定到窗口的這個(gè)事件中
{
????var whdef = 100/1920;// 表示1920的設(shè)計(jì)圖,使用100PX的默認(rèn)值
????var wH = window.innerHeight;// 當(dāng)前窗口的高度
????var wW = window.innerWidth;// 當(dāng)前窗口的寬度
????var rem = wW * whdef;// 以默認(rèn)比例值乘以當(dāng)前窗口寬度,得到該寬度下的相應(yīng)FONT-SIZE值
????$('html').css('font-size', rem + "px");
});
計(jì)算原理注釋：窗口寬1920時(shí),FONT-SIZE是100PX,那么winWidth時(shí),相當(dāng)于窗口變化為1920時(shí)的 (winWidth / 1920).根據(jù)比例公式,winWidth時(shí)的FONT-SIZE就是 (winWidth/1920)*100
