前面博客提到?關(guān)于rem小數(shù)點(diǎn)的問(wèn)題里面就使用了這個(gè)框架,這篇博客詳細(xì)的給大家做一個(gè)詳細(xì)介紹。
一:下載框架——>點(diǎn)擊下載 訪問(wèn)密碼 59e8
二:引入框架
?注意:下面這句代碼可以省略不寫钦无,?flexible.js 會(huì)進(jìn)行動(dòng)態(tài)生成潘明。歡迎學(xué)習(xí)交流——?夢(mèng)幻雪冰
三:字體大小設(shè)置
字體的設(shè)置虽另,仍舊使用px作為單位丐巫,并配合用data-dpr屬性來(lái)區(qū)分不同dpr下的的大小。關(guān)于這個(gè)dpr可以查看設(shè)備像素比(devicePixelRatio)博客斤斧。
實(shí)例代碼:
夢(mèng)幻雪冰
div {
font-size: 12px;
/*設(shè)備像素比為1的時(shí)候早抠,字體大小為24px;*/
}
[data-dpr="2"]?div?{
font-size: 24px;
/*設(shè)備像素比為2的時(shí)候,字體大小為24px;*/
}
[data-dpr="3"]?div {
font-size: 36px;
/*設(shè)備像素比為3的時(shí)候折欠,字體大小為36px;*/
}
查看結(jié)果:
1吼过、設(shè)備像素比等于1的時(shí)候
2、設(shè)備像素比等于3的時(shí)候
四:一些常用的APIs
夢(mèng)幻雪冰
// 獲取當(dāng)前頁(yè)面的dpr值
console.log(lib.flexible.dpr);
// 獲取當(dāng)前頁(yè)面的rem基準(zhǔn)值
console.log(lib.flexible.rem);
// 把rem轉(zhuǎn)換為px
// 參數(shù)為字符串
console.log(lib.flexible.rem2px(["2rem"]));
// 參數(shù)為數(shù)值
console.log(lib.flexible.rem2px([2]));
// 把px轉(zhuǎn)換為rem
// 參數(shù)為字符串
console.log(lib.flexible.px2rem(["60px"]));
// 參數(shù)為數(shù)值
console.log(lib.flexible.px2rem([60]));?
// 刷新當(dāng)前頁(yè)面的rem基準(zhǔn)值
lib.flexible.refreshRem()?