溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一 什么是rem？
“font size of the root element 這是w3c的定義
也就是說是相對于根節點（html節點）的字體大小的單位。
目前主流的瀏覽器基本都支持rem這個單位，大部份的默認字體單位是16px。
圖片摘自 http://caniuse.mojijs.com/Home/Html/item/key/rem/index.html
二 簡單應用。
既然確定在各個主流瀏覽器都能食用的話，我們就放心大膽在移動端進行開發了。
舉個例子說明
-size:62.5%; --size:1
由于我們選定的瀏覽器默認字體為16px，將根節點html設置為 font-size:62.5%;，這樣換算下來的話 1rem = 10px ，在單位的計算方便將會方便很多。
三 響應式使用。
在實際開發過程中，不論是移動端還是pc端都要兼容各種分辨率的設備，所以實際尺寸是要響應式的。
假如說上個例子的62.5%是基于iPhone5的尺寸，也就是說是320*568的尺寸
如果是ipad尺寸的時候，只要相應的擴大倍數即可
@media only screen and (min-width: 768px){
html {
font-size: 150%!important;
}
}注：利用媒體查詢，可根據自己的實際需要，設定不同的尺寸。
四 rem的進階使用
先甩上地址 ht tps://g ithub. com/am fe/lib-flexible
說起移動端適配，怎么能少 了淘寶的移動端~
這個教程足夠詳細了（如果絕對還不夠的話，可以參考下這個地址 h ttp s://gi thu b.com/am fe/article/issues/17 ，其中還有現成的demo）。
在引入flexible.js過后，關于px轉成rem的方法：
在sublime中是有直接轉換的插件，有興趣的童鞋可以去研究下。
在sass/less預編譯下也可快速計算當前尺寸。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
