1、單位比較
px：絕對單位，頁面按精確像素展示，Windows系統(tǒng)默認(rèn)是96dpi，Apple系統(tǒng)默認(rèn)是72dpi。
em：是相對長度單位，相對于當(dāng)前對象內(nèi)文本的字體尺寸，即em的計(jì)算是基于父級元素font-size的，（瀏覽器默認(rèn)字體是16px），通常1em=16px，整個(gè)頁面內(nèi)1em不是一個(gè)固定的值。
rem：相對單位，可理解為”root em”, 相對根節(jié)點(diǎn)html的字體大小來計(jì)算。
2、如何實(shí)現(xiàn)響應(yīng)式變化。
響應(yīng)頭：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
函數(shù)封裝：
function getRem(pwidth,prem){
//---pwidth---UI圖的寬度
//---prem--自己設(shè)置的換算比例
//獲取html元素
var html = document.getElementsByTagName("html")[0];
//---屏幕的寬度（兼容處理）
var ScreenWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = ScreenWidth/pwidth*prem + "px";
}
調(diào)用函數(shù)：
window.onload = function(){
//---文檔加載完調(diào)用getRem()
getRem(1420,100)
/*720代表設(shè)計(jì)師給的設(shè)計(jì)稿的寬度，你的設(shè)計(jì)稿是多少，就寫多少;100代表換算比例，這里寫100是
為了以后好算,比如，你測量的一個(gè)寬度是100px,就可以寫為1rem,以及1px=0.01rem等等*/
};
window.onresize = function(){
//---窗口或框架被調(diào)整大小發(fā)生變化
getRem(1420,100)
};
遠(yuǎn)近互聯(lián)前端小華整理發(fā)布，希望能對學(xué)習(xí)技術(shù)的你有所幫助
遠(yuǎn)近互聯(lián)專業(yè)提供網(wǎng)站建設(shè)、APP開發(fā)、網(wǎng)站優(yōu)化、外貿(mào)網(wǎng)站SEO、微信運(yùn)營的品牌整合營銷服務(wù)讓客戶通過網(wǎng)絡(luò)品牌建立與網(wǎng)絡(luò)傳播提高業(yè)績。
