前面博客提到?關于rem小數點的問題里面就使用了這個框架,這篇博客詳細的給大家做一個詳細介紹。
一:下載框架——>點擊下載 訪問密碼 59e8
二:引入框架
?注意:下面這句代碼可以省略不寫,?flexible.js 會進行動態生成。歡迎學習交流——?夢幻雪冰
三:字體大小設置
字體的設置,仍舊使用px作為單位,并配合用data-dpr屬性來區分不同dpr下的的大小。關于這個dpr可以查看設備像素比(devicePixelRatio)博客。
實例代碼:
夢幻雪冰
div {
font-size: 12px;
/*設備像素比為1的時候,字體大小為24px;*/
}
[data-dpr="2"]?div?{
font-size: 24px;
/*設備像素比為2的時候,字體大小為24px;*/
}
[data-dpr="3"]?div {
font-size: 36px;
/*設備像素比為3的時候,字體大小為36px;*/
}
查看結果:
1、設備像素比等于1的時候
2、設備像素比等于3的時候
四:一些常用的APIs
夢幻雪冰
// 獲取當前頁面的dpr值
console.log(lib.flexible.dpr);
// 獲取當前頁面的rem基準值
console.log(lib.flexible.rem);
// 把rem轉換為px
// 參數為字符串
console.log(lib.flexible.rem2px(["2rem"]));
// 參數為數值
console.log(lib.flexible.rem2px([2]));
// 把px轉換為rem
// 參數為字符串
console.log(lib.flexible.px2rem(["60px"]));
// 參數為數值
console.log(lib.flexible.px2rem([60]));?
// 刷新當前頁面的rem基準值
lib.flexible.refreshRem()?