前端大屏 如何进行大屏的自适应

• 在考虑中项目中 我们会考虑屏幕的大小 第一 就是先给个固定的屏幕大小 ui会给你 一个尺寸

• 在监听屏幕的变化来实现自适应 -` onMounted(async () => {

  ws.value = useWebSocketStore();

  // ws.value.SocketInit()

  // farmCount hiveCount monitorCount warnCount const res = await getAllCountApi({}); topdata.value = res; screenScale(); nextTick(); });

  // 执行大屏缩放 function screenScale() { const element = document.getElementById('honeyId'); if(element){ screen.value.style.transform = scale(${getScale()}) translate(-50%, -50%); }

  }

  // 定义大屏缩放比例 function getScale(w = 3840, h = 2160) { const ww = window.innerWidth / w; const hh = window.innerHeight / h; return ww < hh ? ww : hh; } // 监听视口变化 screenScale(); };`

  css 单位是非常重要的一点 %，vh vw rem em %:相对于父元素的占比 vh：相对整个屏幕的高度 vw：相对整个屏幕的宽度 em:是一个相对单位，其值基于当前元素的字体大小。如果当前元素没有设置字体大小，则继承自父元素的字体大 小。em单位使得样式能够根据上下文动态调整，非常适合创建流体布局和响应式设计。 ` @screen_header_cener_height: 14vh; // 大屏样式 @color: #4f115c; // 默认大屏尺寸 @screen_width: 3840px; @screen_height: 2160px;

`