移動端配置程式碼

html 中的程式碼

<meta name='viewport' content='width=device-width, user-scale=no, maximum-scale=1, minimum-scale=1, viewport-fit=cover, initial-scale=1' />

js中配置程式碼

function rem () {
//獲取裝置寬度,vue的html 中一定要加分號，eslint-disable
var deviceWith = Math.min(document.documentElement.getBoundingClientRect().width, 500
 
);

//根據裝置寬度進行當前rem基準值的計算
var currentValue = deviceWith * 100  /  750 + 'px';
//750是設計稿的寬度
//100是預設rem基準值，方便計算設為100px

//改變html的font-size
document.querySelector('html')[0].style.fontSize = currentValue;
}

rem();
//onresize是監聽裝置寬度和div寬度的變化事件
window.onresize = function () {
   rem();
}

SCSS中的程式碼配置（rem.scss）

@function
 
 rem ($px) {
    @return $px / 100 + rem
};

使用方法

font-size: rem(30);