前端大屏自适应方法总结

方法一：缩放（scale）

1.app.vue组件代码（用于app组件缩放会作用于整项目，也可以单独用于大屏页面）

1. <template>
2.   <ElConfigProvider :locale="locale">
3.     <div class="inner"
4.          :style="{
5.            'width': `${styleTransform.width}px`,
6.            'height': `${styleTransform.height}px`,
7.            'transform': styleTransform.transform
8.          }">
9.       <router-view></router-view>
10.     </div>
11.   </ElConfigProvider>
12. </template>
14. <script setup>
15. import {reactive, onMounted, onBeforeUnmount} from 'vue';
16. import {ElConfigProvider} from 'element-plus';
17. import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
18. import {useRouter} from 'vue-router';
20. // 定义 Element Plus 的语言环境
21. const locale = zhCn;
22. const router = useRouter();
24. // 使用 reactive 创建响应式对象，保存视口的宽度、高度和变换样式
25. const styleTransform = reactive({
26.   width: 1920, // 视口的初始宽度
27.   height: 953, // 视口的初始高度
28.   transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)', // 初始变换样式
29. });
31. // 生命周期钩子，在组件挂载时设置初始缩放，并设置窗口调整大小时的处理函数
32. onMounted(() => {
33.   setScale(); // 组件挂载时设置缩放
34.   window.addEventListener('resize', setScale); // 监听窗口调整大小事件
35. });
36. // 在组件销毁时移除窗口调整大小事件监听器
37. onBeforeUnmount(() => {
38.   window.removeEventListener('resize', setScale); // 移除窗口调整大小事件监听器
39. });
41. // 根据窗口大小计算缩放比例
42. const getScale = () => {
43.   const w = window.innerWidth / styleTransform.width; // 计算宽度缩放比例
44.   const h = window.innerHeight / styleTransform.height; // 计算高度缩放比例
45.   return {x: w, y: h};
46. };
48. // 根据计算的缩放比例更新变换样式
49. const setScale = () => {
50.   const scale = getScale(); // 获取当前缩放比例
51.   styleTransform.transform = `scaleY(${scale.y}) scaleX(${scale.x}) translate(-50%, -50%)`;
52. };
53. </script>
55. <style scoped>
56. .inner {
57.   transform-origin: 0 0; /* 设置缩放的原点为元素的左上角 */
58.   position: fixed; /* 固定定位，使元素相对于视口的位置不变 */
59.   left: 50%; /* 将元素水平居中 */
60.   top: 50%; /* 将元素垂直居中 */
61.   transition: 0.3s; /* 为缩放样式的变化添加平滑过渡效果 */
62. }
63. </style>

复制代码

2.缺点：利用此方法后页面不能有地图（cesium）等js库，形状会受缩放影响，从而影响地图的交互效果
方法二：vh，vw，百分比%，利用高度大概宽度比例算出px值

1.思路：在页面中尽量利用vh，vw，%，等单位去设置容器宽高大小，遇到需要用px值去设置大小的就需要用（100vh/开发设备表现屏的高度）大概（100vw/开发设备表现屏的宽度）算出一个比例再用calc计算属性去算出一个动态的px值
2.详细实现（当前例子用高度比例来算）
1）算出比例值（scss的话把@符号改成$符号）

2.在需要用到px值的时间用计算出来的动态px值

3.缺点：此方法只用高度来计算比例，当欣赏器的窗口只变化宽度时，就会出自适应无效大概不充实的征象（只用宽度来计算时也有这样的问题，但实际场景中一般不会出现只变化高度大概宽度，所以影响较小）

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。