移動web開發之rem布局

理論基礎：

什麼是rem?（fontsize of the root elelment）說白了就是字型單位，是指相對於根元素的字型大小的單位。

rem的優點：

相對於流式布局、響應式布局等布局方式，rem更為靈活，可以根據根不同螢幕尺寸上的根元素來等比例適配。

rem的基準值（根元素的字型大小）而網頁的根元素就是html,所以我們只需要改變html的字型大小，就可以改變rem的基準值。

既然rem可以根據螢幕的大小來等比例的適配，那麼rem的基準值我們就不能寫為定值，這就需要我們動態的改變rem的基準值。

/*利用**查詢動態修改基準值*/

@media screen and (max-width: 360px)
} @media screen and (max-width: 320px)
}

改進：

利用js動態的獲取當前螢幕的大小來動態的改變基準值

let htmlwidth=document.documentelement.clientwidth||document.body.clientwidth;

console.log(htmlwidth);//當前螢幕寬度
let htmldom=document.queryselector("html");
htmldom.style.fontsize=htmlwidth/10+"px";//設定html的字型大小

移動web開發 rem布局

rem單位 rem root em 是乙個相對單位，類似於em，em是父元素字型大小。不同的是rem的基準是相對於html元素的字型大小。比如，根元素 html 設定font size 12px 非根元素設定width 2rem 則換成px表示就是24px。根html 為 12px html 此時 ...

03 移動WEB開發 rem布局

rem root em 是乙個相對單位 and not only 關鍵字 media feature 特性，必須用小括號包含 示範 media mediatype and not only media feature media screen and max width 640px 當螢幕大於320...

移動Web開發 rem布局 less

rem單位 rem root em 是乙個相對單位，是相對於html元素的字型大小 media可以針對不同的螢幕尺寸設定不同的樣式 media mediatype and 1.查詢型別 2.關鍵字 3.特性 4.查詢書寫規則 為了防止混亂，查詢我們要按照從小到大或者從大到小的順序來寫,但是我們最喜歡...