rem 与px的转换

使用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);

    }