最近遇到大屏适配的项目，网上也查找了许多资料，经过多次验证，以下面这个方案稍算简洁。
一、设计尺寸
- 项目的设计尺寸为1920*1080（设计尺寸会对后面的适配有影响）
二、在public文件夹中新建一个flexs.js文件，然后填充如下代码：
//flexs.js
(function(win) {
var bodyStyle = document.createElement('style');
// 这里根据具体的设计稿尺寸来定
bodyStyle.innerHTML = `body{width:1920px; height:1080px!important;}`;
document.documentElement.firstElementChild.appendChild(bodyStyle);
function refreshScale() {
let docWidth = document.documentElement.clientWidth;
let docHeight = document.documentElement.clientHeight;
var designWidth = 1920, // 这里根据具体的设计稿尺寸来定
designHeight = 1080, // 这里根据具体的设计稿尺寸来定
widthRatio = docWidth / designWidth,
heightRatio = docHeight / designHeight;
document.body.style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;overflow: hidden;`;
// 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
setTimeout(function() {
var lateWidth = document.documentElement.clientWidth,
lateHeight = document.documentElement.clientHeight;
if (lateWidth === docWidth) return;
widthRatio = lateWidth / designWidth;
heightRatio = lateHeight / designHeight;
document.body.style = 'transform:scale(' + widthRatio + ',' + heightRatio + ');transform-origin:left top;overflow: hidden;';
}, 0);
}
refreshScale();
win.addEventListener(
'pageshow',
function(e) {
if (e.persisted) {
// 浏览器后退的时候重新计算
refreshScale();
}
},
false
);
win.addEventListener('resize', refreshScale, false);
})(window);
三、在index.html文件中引入文件
<body>
<div id="app"></div>
<!-- 引入JS -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%=js%>"></script>
<% } %>
<!-- built files will be auto injected -->
</body>
<!-- 引入flexs.js -->
<script type="text/javascript" src="<%= BASE_URL %>flexs.js"></script>
四、消除滚动条—在App.vue文件中，写入以下代码：
<style lang="scss">
body::-webkit-scrollbar {
display: none;
}
</style>
好了，现在你就可以愉快的按照设计图尺寸写代码了。当然，要想看实际效果，还是需要按F11进入全屏模式才行。
