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

---

版权声明：自由转载-非商用-非衍生-保持署名

转载于:https://juejin.im/post/5c11c41c6fb9a049ef2672ff