使用rem适配移动端

使用rem适配移动端

在main.js设置字体大小

//以屏幕宽度为375为例
const winWidth = window.innerWidth;//获取屏幕宽度
const fontSize = winWidth / 375 * 20;
document.getElementsByTagName('html')[0].style.fontSize = fontSize + 'px';//设置根元素字体

<div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
</div>

• 使用less

/*    *.less    */
@r:40rem; /*设计稿宽度以750为例*/
.home{
	width: 750/@r;
}  

//移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制
/* 基于UI width=750px DPR=2的页面 */
html {
    font-size: calc(100vw / 7.5);
}