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

    }