需求是這樣的，我用的項目是vue admin 項目? 現在需要在做大屏項目
不希望顯示除了大屏的其他東西 于是想了這個辦法??
至于大屏適配問題 請看我文章? ?底部的代碼直接復制就可以運行 vue2?
px轉rem 大屏適配方案 postcss-pxtorem-CSDN博客

?

<template><div class="container"><!-- 粉色盒子 --><div class="pink-box" ref="pinkBox"><div class="box-content">點擊全屏</div><button class="fullscreen-btn" @click="toggleFullscreen('pinkBox')">{{ isPinkFullscreen ? '退出全屏' : '全屏展示' }}</button></div><!-- 天藍色盒子 --><div class="skyblue-box" ref="skyblueBox"><div class="box-content">點擊全屏</div><button class="fullscreen-btn" @click="toggleFullscreen('skyblueBox')">{{ isSkyblueFullscreen ? '退出全屏' : '全屏展示' }}</button></div></div>
</template><script>
export default {components: {},data () {return {isPinkFullscreen: false,isSkyblueFullscreen: false}},computed: {},watch: {},created () {},mounted () {// 監聽全屏狀態變化document.addEventListener('fullscreenchange', this.handleFullscreenChange)},beforeDestroy () {// 移除事件監聽器document.removeEventListener('fullscreenchange', this.handleFullscreenChange)},methods: {// 切換全屏狀態toggleFullscreen (boxRef) {const element = this.$refs[boxRef]if (!document.fullscreenElement) {// 進入全屏element.requestFullscreen()if (boxRef === 'pinkBox') this.isPinkFullscreen = trueelse if (boxRef === 'skyblueBox') this.isSkyblueFullscreen = true} else {// 退出全屏if (document.exitFullscreen) document.exitFullscreen()}},// 處理全屏狀態變化handleFullscreenChange () {if (!document.fullscreenElement) {this.isPinkFullscreen = falsethis.isSkyblueFullscreen = false}}}
}
</script><style lang="scss" scoped>
.container {display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 20px;padding: 20px;height: 90vh;background: plum;
}.pink-box,
.skyblue-box {position: relative;width: 100%;height: 300px;display: flex;justify-content: center;align-items: center;border-radius: 8px;
}.pink-box {background-color: pink;border: 1px solid #ff9999;
}.skyblue-box {background-color: skyblue;border: 1px solid #66b3ff;
}.box-content {font-size: 20px;color: white;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}.fullscreen-btn {position: absolute;right: 10px;bottom: 10px;padding: 5px 10px;background-color: rgba(255, 255, 255, 0.8);border: none;border-radius: 4px;cursor: pointer;
}:fullscreen .pink-box,
:fullscreen .skyblue-box {width: 100vw;height: 100vh;border-radius: 0;
}
</style>