仅为记录方便日后快速开发使用，实例为vue脚手架
full.js
var styleEl = document.createElement('div');
styleEl.style = 'display: none;';
var init = false;
function createFullScreenStyle(width, height, items) {
var elWidth = document.documentElement.clientWidth;
var elHeight = document.documentElement.clientHeight;
var scaleX = elWidth / width;
var scaleY = elHeight / height;
styleEl.innerHTML = `<style>
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
`
+ items.map(item => {
return item + `{
margin: 0; padding: 0;
width: ${width}px; height: ${height}px;
transform: scaleX(${scaleX}) scaleY(${scaleY});
transform-origin: 0 0;
}`
}).join("\n") +
`
</style>`
}
export default function(width, height, items) {
// 初始化时设置resize监听函数，避免重复设置
if (init) {
return;
}
init = true;
document.body.appendChild(styleEl);
window.addEventListener('resize', createFullScreenStyle.bind(null, width, height, items));
createFullScreenStyle(width, height, items);
}
main.js
import Vue from 'vue';
import full from './util/full'
new Vue({
router,
store,
render: (h) => h(App),
mounted() {
full(3840, 1890, ['#app']) // 为app实例添加样式,后续可继续添加，如插件弹窗el-dialog__wrapper等，需要自适应的内容
}
}).$mount('#app');
此方案有不足之处，当屏幕比例不成比例时大屏的内容将会被挤压变形，但这也是做到了真正的自适应，效果真不如人意
可参考另一篇 大屏自适应方案https://www.jianshu.com/p/4329d977037b，此方案不会出现挤压，但没有内容时底部会空白，比较常见的解决方案
简单实例
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大屏适应调试</title>
</head>
<body>
<div id="app">
<img src="https://images.pexels.com/photos/7182668/pexels-photo-7182668.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
<img src="https://images.pexels.com/photos/7182668/pexels-photo-7182668.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
<img src="https://images.pexels.com/photos/7182668/pexels-photo-7182668.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
<img src="https://images.pexels.com/photos/7182668/pexels-photo-7182668.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
<img src="https://images.pexels.com/photos/7182668/pexels-photo-7182668.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
</div>
</body>
</html>
<script src="full.js"></script>
full.js
var styleEl = document.createElement('div');
styleEl.style = 'display: none;';
var init = false;
function createFullScreenStyle(width, height, items) {
var elWidth = document.documentElement.clientWidth;
var elHeight = document.documentElement.clientHeight;
var scaleX = elWidth / width;
var scaleY = elHeight / height;
styleEl.innerHTML = `<style>
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
`
+ items.map(item => {
return item + `{
margin: 0; padding: 0;
width: ${width}px; height: ${height}px;
transform: scaleX(${scaleX}) scaleY(${scaleY});
transform-origin: 0 0;
}`
}).join("\n") +
`
</style>`
}
function __init(width, height, items) {
// 初始化时设置resize监听函数，避免重复设置
if (init) {
return;
}
init = true;
document.querySelector('body').append(styleEl);
window.addEventListener('resize', createFullScreenStyle.bind(null, width, height, items));
createFullScreenStyle(width, height, items);
}
__init(1920, 1080,['#app'])
