前端大屏可视化适配方案（通用模板，快速上手）

2023-09-23 22:01| 来源: 网络整理| 查看: 265

在日常前端开发中，大屏项目是每个前端开发者必备技能，但是目前设备尺寸大小和分辨率都不相同，所以大屏适配成了一个头疼的问题。看到网上的实现方案有rem，flexible，zoom，百分比，总感觉没那么完美，于是自己研究了一下也借鉴了网上大神的方法，实现了一下这三种大屏适配方案，在实际开发中可以借鉴使用

第一种：使用css属性scale缩放来适配（简单，易上手）

gitee地址：大屏可视化模板: 大屏可视化模板。利用scale来分辨率适配

我把关键代码封装成了组件，使用的时候直接套在大屏页面就可以实现

import { ref, onMounted, defineProps } from 'vue' const width = ref(null), //设计宽度 height = ref(null), //设计高度 scale = ref(null) const props = defineProps({ width: { type: String, default: '1920px', }, height: { type: String, default: '1080px', }, }) const init = () => { setScale() window.addEventListener('resize', setScale) } const setScale = () => { let ww = window.innerWidth / props.width let wh = window.innerHeight / props.height scale.value = ww < wh ? ww : wh } init() .scale-box { width: v-bind('props.width'); height: v-bind('props.height'); transform: scale(v-bind(scale)) translate(-50%, -50%); transform-origin: 0 0; position: absolute; left: 50%; top: 50%; transition: 0.3s; } 第二种：固定缩放比

gitee地址：大屏可视化模板固定尺寸: 大屏可视化模板固定尺寸

关键代码：

export const fitScreen = () => { const body = document.documentElement const bodyWidth = body.clientWidth const bodyHeight = body.clientHeight const realRatio = bodyWidth / bodyHeight const designRatio = 16 / 9 const scaleRate = realRatio > designRatio ? bodyHeight / 1080 : bodyWidth / 1920 const app:any= document.querySelector('.bigScreen') app && (app.style.transformOrigin = 'left top') && (app.style.transform = `scale(${scaleRate}) translateX(-50%)`) && (app.style.width = `${bodyWidth / scaleRate}px`) }

第三种：缩放+铺满全屏+百分比

gitee地址：大屏可视化自动拉伸模板: 大屏可视化自动拉升模板

关键代码：

import { ref, reactive, onMounted, onUnmounted } from "vue"; // * 默认缩放值 const scale = reactive({ width: "1", height: "1", }); // * 设计稿尺寸（px） const baseWidth = 1920; const baseHeight = 1080; // * 需保持的比例 const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5)); let drawTiming = ref(null); const appRef = ref(); const calcRate = () => { if (!appRef.value) return; // 当前宽高比 const browserRoom = getZoom(); // 当前宽高比 /** * 1. 先将宽高乘上浏览器缩放倍数x * 2. 再将整个页面用scale缩放 1/x 倍 * 在视觉上，就感觉页面没有缩放 */ // 宽高 const w = window.innerWidth * browserRoom; const h = window.innerHeight * browserRoom; // scale缩放比例 const scl = parseFloat((1 / browserRoom).toFixed(5)); // 页面重绘处理 appRef.value.style.width = `${w}px`; appRef.value.style.height = `${h}px`; appRef.value.style.transform = `scale(${scl}, ${scl}) translate(-50%, -50%)`; }; const getZoom = () => { let ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio; } else if (~ua.indexOf("msie")) { if (screen.deviceXDPI && screen.logicalXDPI) { ratio = screen.deviceXDPI / screen.logicalXDPI; } } else if ( window.outerWidth !== undefined && window.innerWidth !== undefined ) { ratio = window.outerWidth / window.innerWidth; } if (ratio) { ratio = Math.round(ratio * 100); } return parseFloat(ratio / 100).toFixed(2); }; // 窗口大小变化 const resize = () => { clearTimeout(drawTiming.value); drawTiming.value = setTimeout(() => { calcRate(); }, 200); }; onMounted(() => { calcRate(); window.addEventListener("resize", resize); }); onUnmounted(() => { window.removeEventListener("resize", resize); });

以上就是我总结的大屏可视化屏幕适配方案，有好的想法可以和我交流，一起进步！！！

【本文地址】

公司简介

联系我们