vue 适配各种屏幕大小

首先要找到项目中的index.html文件，添加如下代码

<script>

(function (doc, win) {

var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () {

var clientWidth = docEl.clientWidth;

if (!clientWidth)

   return;

if (clientWidth >= 375) {

   docEl.style.fontSize = '16px';

} else {

   docEl.style.fontSize = 16 * (clientWidth / 375) + 'px';

 }

};

if (!doc.addEventListener)

   return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc,false);

})(document, window);

//上面这段代码的大意是:如果页面的宽度超过了375px,那么页面中html的

// font - size恒为100px, 否则, 页面中html的font - size的大小为: 100 * (当前页面宽度 / 375)

</script>

 在scss中定义 16px = 1rem，如下图，将所有的原来以px为单位的替换为按比例缩放的rem单位，这样在就能轻松适配屏幕大小包括移动端(各种机型)和pc端了。

$Rem: 1/16;

.detailsContent {

height: 85vh;

overflow: scroll;

padding: $Rem * 25rem 0 $Rem * 15rem;

background-color: rgb(245, 245, 245);

.content_title {

    height: $Rem * 20rem;

    display: flex;

    flex-direction: row;

    font-size: $Rem * 21rem;

    line-height: $Rem * 21rem;

    font-weight: bold;

    color: #1a1a1a;

    margin: 0 $Rem * 16rem;

}

}

遇到问题，欢迎留言！！