添加rem
项目下新建rem.js文件内容为:
(function () {
function resize() {
var baseFontSize = 100; //设计稿100px相当于1rem
var designWidth = 750;//设计稿宽度
var width = window.innerWidth;//获取屏幕宽度
var currentFontSize = (width / designWidth) * baseFontSize;//
document.querySelector('html').style.fontSize = currentFontSize+'px';//html的真实数值
}
window.onresize = function () {
resize()
}
document.addEventListener('DOMContentLoaded',resize)
}())
main.js里边引用rem:import '@/api/rem'
,api为存放rem.js的文件夹
调用
<h1 class="h1">Home</h1>
.h1{
background: chartreuse;
width: 3.75rem;
height: 1rem;
font-size: 0.16rem;
text-align:center;
vertical-align:middle;
display: table-cell;
}
是不是比其他方法简单了许多呢?