大屏响应式页面适配定义窗口大小变

最新推荐文章于 2024-08-12 09:24:46 发布

周不凢

最新推荐文章于 2024-08-12 09:24:46 发布

阅读量103

点赞数 2

分类专栏： CSS 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_39047060/article/details/139358272

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<template>
  <div class="app-container">
    <div :style="bigScreenStyle">
      <p>页面内容</p>
    </div>
</div>

</template>

<script setup>
import {ref, onMounted } from 'vue';
const bigScreenStyle = ref({});
onMounted(() => {
  adaptIt();
});
const adaptIt = () => {
const winW = 1920 || window.screen.width;
const winH = 1080 || window.screen.height;
const ratioX = (document.documentElement.clientWidth / winW).toFixed(5);
const ratioY = (document.documentElement.clientHeight / winH).toFixed(5);
const styles = `
transform: scale(${ratioX}, ${ratioY})!important;
width: ${winW}px!important;
height: ${winH}px!important;
transform-origin: 0 0;
overflow:hidden;
user-select: none;
`;
bigScreenStyle.value = styles;
};
window.addEventListener('resize', adaptIt, true);
</script>

<style scoped lang="scss">
 .app-container{
  width:100%;
  height:100vh;
  p{
    font-size: 18px;
  }
 }
</style>