大屏 超宽屏自适应最优解决方案（transform:scale） |
您所在的位置：网站首页 › 前端scale用法 › 大屏 超宽屏自适应最优解决方案（transform:scale） |
大屏 超宽屏自适应最优解决方案（transform:scale）
|
问题引入： 可视化数据大屏需要适配各种大屏尺寸 1080P：1920*1080 2K：2560*1440 左右 4K：3840*2160 左右 8K：7680*4320 左右 ① 大屏使用rem 耗时 而且对浏览器最小字体不支持， ② 使用transform:scale可以节省百分之九十工作量 ③ 好处不多说：看一篇文章 学习一下 咱们再来实战！ 优点：前期可以直接写页面，后期直接加上组件就行了，不用适配，直接用px写 缺点：在和设定比例不一样的情况下，会被缩小展示，上下左右两边会存在一定的空白 （1）创建一个组件SacleBox export default { name: "ScaleBox", props: {}, data() { return { scale: 0, width: 1920, height: 1080, }; }, mounted() { this.setScale(); window.addEventListener("resize", this.debounce(this.setScale)); }, methods: { getScale() { // 固定好16：9的宽高比，计算出最合适的缩放比 const { width, height } = this; const wh = window.innerHeight / height; const ww = window.innerWidth / width; console.log(ww < wh ? ww : wh); return ww < wh ? ww : wh; }, setScale() { // 获取到缩放比例，设置它 this.scale = this.getScale(); if (this.$refs.ScaleBox) { this.$refs.ScaleBox.style.setProperty("--scale", this.scale); } }, debounce(fn, delay) { const delays = delay || 500; let timer; return function () { const th = this; const args = arguments; if (timer) { clearTimeout(timer); } timer = setTimeout(function () { timer = null; fn.apply(th, args); }, delays); }; }, }, }; #ScaleBox { --scale: 1; } .ScaleBox { position: absolute; transform: scale(var(--scale)) translate(-50%, -50%); display: flex; flex-direction: column; transform-origin: 0 0; left: 50%; top: 50%; transition: 0.3s; z-index: 999; // background: rgba(255, 0, 0, 0.3); } （2）引用组件 import ScaleBox from "../../components/ScaleBox/index.vue"; export default { name: "bigScreen", components: { ScaleBox, }, data() { return { // -- } } （3）用ScaleBox组件包裹整个页面
注意： （1）使用px做单位，不使用rem （2）ScaleBox内部页面元素最大的盒子按照19201080为容器 严格计算。所有宽高加起来为19201080 （3）最好不要使用百分比分配宽高 到此结束！ |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |