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
版权声明:自由转载-非商用-非衍生-保持署名