REM適配實踐

REM適配實踐

做者：吳業飛 時間：2018.06.21

---

js動態修改html的font-size

由於全部頁面都要使用rem適配，因此修改html的font-size的代碼應該寫在Global.js中而後在layout.html中將Global.js引入

//get viewport
var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log("htmlWidth is " + htmlWidth);
//get html dom
var htmlDom = document.getElementsByTagName('html')[0];

//set html fontsize，here 116.125 = htmlWidth/16,16 is html default font-size
htmlDom.style.fontSize = htmlWidth /116.125 + 'px';

window.addEventListener('resize', function(){
    var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    htmlDom.style.fontSize = htmlWidth /116.125 + 'px';
})
/*use rem end */
複製代碼

定義px到rem的轉換函數

咱們使用sass，新建一個pxToRem.scss文件，內容爲

//A function help you change px to rem
@function pxToRem($px) {
	$rem: 16px;
	@return ($px / $rem) + rem;
}
複製代碼

而後在須要使用這個函數的scss文件中使用@import 'pxToRem.scss';引入

使用起來像這樣

.banner-title {
    font-size: pxToRem(96px);
    line-height: pxToRem(96px);
    margin-bottom: pxToRem(270px);
}
複製代碼

最後別忘了將scss編譯成css

---

版權聲明：自由轉載-非商用-非衍生-保持署名