rem是什么？
rem（font?size?of?the?root?element）是指相對于根元素的字體大小的單位雕什。簡單的說它就是一個相對單位缠俺。看到rem大家一定會想起em單位贷岸，em（font?size?of?the?element）是指相對于父元素的字體大小的單位壹士。它們之間其實很相似，只不過一個計算的規(guī)則是依賴根元素一個是依賴父元素計算偿警。·
rem：
根據(jù)HTML根節(jié)點（html節(jié)點）的字體大小來確定rem的單位長度躏救。
flexible.js
根據(jù)屏幕寬度確定html 節(jié)點的 font-size ，根據(jù) 手機dpr值設定 Viewprot scale的值
如下：iphone5s的 viewport 設置代碼? （flexible.js自動生成）
本文主要來講我現(xiàn)在一直采用的 flexible.js+rem解決方案 以及其他一些移動端需要注意的地方
先來一個例子
首先項目結構
_public.scss//_ 符號螟蒸，寫在scss文件前面盒使，在 compass watch命令下 文件不會被編譯
這個文件主要用來存放，rem（） px轉像素的函數(shù)七嫌，以及一些公共的顏色變量少办，可復用的樣式等！
**_common.scss **
主要用來引入compass/reset模塊 诵原，同時引入_public.scs文件
style.scss
@charset"utf-8";??? //設置scss文件字符編碼 英妓，每個scss文件都需要
@import"compass/css3";??? //引入 compass的css3模塊
@import"common/_common.scss";?? // 引入 預先編寫的 _common.scss 文件
body{
??????? width:10rem;?? //定義body的寬度充滿全屏，在_public.scss 文件 和 flexible.js 文件?
?????????????????????????????? //里面是將移動端屏幕平均劃分為 10等分皮假。沒一份為 1rem；
}
header{
?????? width:10rem;
???????? height:rem(96);??? //此處嘉定設計的標題欄高度為? 96px 骂维，所以寫法是將? 96px 的數(shù)值
??????????????? ? ? ? ? ? ? ? ? ? ? //傳入rem（） 函數(shù)中 惹资，scss在編譯的時候回自動將其編譯成rem值
}
index.html
演示
好了基本設置完畢，可以放心的使用量到的px值來寫布局了航闺。其他的flexible.js 和 compass 會幫你搞定
請注意如下部分
_common.scss中
body{
??????? background-color:#eee;
??????? width:10rem;
???????? max-width:10rem;//為了屏幕超出了寬度后褪测，頁面最大值為10rem
???????? margin:0auto;// 屏幕超寬后 body內容居中顯示
????????? font-size:$font22;
????????? font-family:Helvetica,STHeiti,sans-serif;
?????????? color:#333333;? ?
????????? @includeuser-select(text); //用戶選擇操作限制，避免用戶選擇文本以外的范圍??????????????
?????????? @includeopacity(0);//入場動畫初始值設定
?????????? @includetransition(all 0.5s);//入場動畫效果設定
}
input,button,select{??????? //去掉安卓 和蘋果給定的默認效果潦刃，方便自定義
???????? border: none;
???????? outline: none;? ?
???????? -webkit-appearance: none;? ?
???????? -webkit-tap-highlight-color:rgba(255,255,255,0);
???????? font-size:$font20;
}
項目開始編寫前? 侮措，請在 項目根目錄 也就是 config.rb 目錄下 啟動命令行窗口（PS：shift+鼠標右鍵）并且輸入compass watch命令，來監(jiān)聽scss文件變化? 乖杠，在每次保存scss 文件的時候分扎，compass會自動編譯 scss文件夾中的文件到css目錄下
現(xiàn)行移動端多屏幕適配方案有Media Query（媒介查詢） 和? rem兩種，相對于Media Query來說 胧洒，Rem 中flexible.js更適合懶人操作畏吓。
問題：
通常設計圖的單位都是px墨状，而我們使用rem單位之后，就涉及到了菲饼，px單位轉換為rem單位肾砂；
在頁面加載的時候，可能會出現(xiàn)一次閃動
px單位轉rem單位解決方法
style.scss
//設計圖寬度 640px 等分為10等分
/**
* rem單位長度
*/
$fontSize:64;
/**
* 將px數(shù)值轉換成rem數(shù)值的函數(shù)
* @param $n px數(shù)值
*/
@function rem($n) {?
????? @return ($n/$fontSize) * 1rem;
}
div{
width:rem(640);
height:rem(128);
}
參數(shù)說明：
$fontSize? rem單位長度宏悦，這是理想狀態(tài)下的數(shù)值镐确，根據(jù)設計圖確定，計算方法：設計寬度/等分份數(shù)$n? ? ? ?
px數(shù)值,有設計標注 饼煞，或者源葫，頁面制作前自己標注。
style.css
div{
width:10rem;
height:2rem;
}
經(jīng)過compass編譯之后會得到如上圖的結果
當然派哲，flexible.js 也是需要設置的臼氨，如下圖部分數(shù)值需要和scss中函數(shù)的數(shù)值對應
function refreshRem() {
// var width = parseInt(window.screen.width); // uc有bug
var width = docEl.getBoundingClientRect().width;
if (!maxWidth) {
??? maxWidth = 540;?
};
if (width > maxWidth) {
// 淘寶做法：限制在540的屏幕下，這樣100%就跟10rem不一樣了
width = maxWidth;
}
var rem = width * 100 / designWidth;
// var rem = width / 10;? // 如果要兼容vw的話分成10份 淘寶做法
//docEl.style.fontSize = rem + "px";//舊的做法芭届，在uc瀏覽器下面會有切換橫豎屏時定義了font-size的標簽不起作用的bug
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
圖中有兩個640的數(shù)值储矩，此處對應的是設計圖寬度為640，
另有一處數(shù)值為10意思是將屏幕分為10等分褂乍，
次數(shù)兩個數(shù)值 能得上文中
$fontSize = 640/10 = 64;
加載時屏幕閃動的問題
講flexlibe.js文件放置在css樣式文件之前加載持隧，這樣能夠有效的減少屏幕閃動情況的出現(xiàn)
這部分來自http://www.reibang.com/p/b4c189e3c8b4
1.我看了網(wǎng)上很多關于rem的資料，基本都說瀏覽器的默認字號就是16px逃片，然后直接定義font-size:62.5%屡拨。但是，rem屬于css3的屬性褥实，有些瀏覽器的早期版本和一些國內瀏覽器的默認字號并不是16px呀狼，那么上面的10/16換算就不成立，直接給html定義font-size:62.5%不成立损离。
2.chrome強制字體最小值為12px哥艇，低于12px按12px處理，那上面的1rem=10px就變成1rem=12px僻澎，出現(xiàn)偏差（下面給demo）貌踏。
解決方案：
將1rem=10px換為1rem=100px（或者其它容易換算的比例值）;不要在pc端使用rem。
那么上面的頁面根元素樣式要改為：
html {font-size: 625%;
/*100 ÷ 16 × 100% = 625%*/
}
