rem 与px的转换

使用rem代替px，可以使网页随着屏幕大小变化而变化

步骤：1，引用JS文件，如图2所示，调用

1，引用JS文件（以下是remConfig.js）

 

export default function(){
  var deviceWidth = document.documentElement.clientWidth || window.innerWidth
  var whdef = 100/1366;// 表示宽为1366px的设计图,使用100PX的默认值 
  var wH =document.documentElement.clientHeight || window.innerHeight;// 当前窗口的高度
  var wW = document.documentElement.clientWidth || window.innerWidth;// 当前窗口的宽度
  if(wW>=1920){
    wW = 1920;
  }
  if(wW <= 1366){
    wW = 1366;
  }
  var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
  document.documentElement.style.fontSize = rem + 'px'
}

注：此例是以1366px宽屏幕的设计稿为参照，大于1366px后网页上只要使用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);
 }