使用rem代替px ,可以使网页随着屏幕大小变化而变化
步骤:1、引用js文件,2,调用
1、引用js文件(以下是remConfig.js)
export default function(){
var deviceWidth = document.documentElement.clientWidth || window.innerWidth
var whdef = 100/750;// 表示750的设计图,使用100PX的默认值 ,可以根据自己的尺寸,750px改成1366px
var wH =document.documentElement.clientHeight || window.innerHeight;// 当前窗口的高度
var wW = document.documentElement.clientWidth || window.innerWidth;// 当前窗口的宽度
if(wW>=750){
wW = 750;
}
if(wW <= 750){
wW = 750;
}
var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
document.documentElement.style.fontSize = rem + 'px'
}
注:此例是以750px宽屏幕的设计稿为参照,大于750px后网页上只要使用rem为单位的元素,都会等比例缩放;
2、调用(在vue为框架的项目中)
在main.js中写入
import remconfig from './api/remConfig'//rem转换的js文件
remconfig();//'rem'转换
window.addEventListener('resize',function(){
remconfig();
//console.log('rem:'+document.documentElement.style.fontSize);
});
使用实例:
.index{ //border:1px solid rosybrown; font-size:0.12rem; padding:0.1rem 0.15rem; height:calc(100vh-0.6rem);
}