首页 > 其他分享 > 基于scale的自适应适配方案

基于scale的自适应适配方案

时间:2022-12-05 09:35:54浏览次数:42  
标签:基于 scale const 缩放 适配 height window resize

在CSS3中,我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放,指的是“缩小”和“放大”的意思。

  • transform: scaleX(x); / 沿x轴方向缩放/
  • transform: scaleY(y); / 沿y轴方向缩放/
  • transform: scale(); / 同时沿x轴和y轴缩放/

适用场景

固定宽高比的Web应用,如大屏或者固定窗口业务应用

项目实战

  1. 新建resize.ts/js文件
import { ref } from "vue";

export default function windowResize() {
 // * 指向最外层容器
 const screenRef = ref();
 // * 定时函数
 const timer = ref(0);
 // * 默认缩放值
 const scale = {
  width: "1",
  height: "1",
 };
    
 // * 设计稿尺寸(px)
 const baseWidth = 1920;
 const baseHeight = 1080;

 // * 需保持的比例(默认1.77778)
 const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));
 const calcRate = () => {
  // 当前宽高比
  const currentRate = parseFloat(
   (window.innerWidth / window.innerHeight).toFixed(5)
  );
  if (screenRef.value) {
   if (currentRate > baseProportion) {
    // 表示更宽
    scale.width = (
     (window.innerHeight * baseProportion) /
     baseWidth
    ).toFixed(5);
    scale.height = (window.innerHeight / baseHeight).toFixed(5);
    screenRef.value.style.transform = `scale(${scale.width}, ${scale.height})`;
   } else {
    // 表示更高
    scale.height = (
     window.innerWidth /
     baseProportion /
     baseHeight
    ).toFixed(5);
    scale.width = (window.innerWidth / baseWidth).toFixed(5);
    screenRef.value.style.transform = `scale(${scale.width}, ${scale.height})`;
   }
  }
 };

 const resize = () => {
  clearTimeout(timer.value);
  timer.value = window.setTimeout(() => {
   calcRate();
  }, 200);
 };

 // 改变窗口大小重新绘制
 const windowDraw = () => {
  window.addEventListener("resize", resize);
 };

 // 改变窗口大小重新绘制
 const unWindowDraw = () => {
  window.removeEventListener("resize", resize);
 };

 return {
  screenRef,
  calcRate,
  windowDraw,
  unWindowDraw,
 };
}
  1. 相关界面引入resize.ts/js
<template>
    <div class="screen-container">
        <div class="screen-content" ref="screenRef">
            <span class="screen-title">基于scale的适配方案</span>
            <img class="screen-img" src="https://img2.baidu.com/it/u=1297807229,3828610143&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt="">
        </div>
    </div>
</template>

<script setup lang="ts">
import windowResize from '../../utils/resize';
import {onMounted, onUnmounted} from 'vue';

const { screenRef, calcRate, windowDraw, unWindowDraw } = windowResize()

onMounted(() => {
    // 监听浏览器窗口尺寸变化
    windowDraw()
    calcRate()
})

onUnmounted(() => {
    unWindowDraw();
})

</script>

<style lang="scss" scoped>
.screen-container {
    height: 100%;
    background-color: lightcyan;
    display: flex;
    justify-content: center;
    align-items: center;

    .screen-content {
        width: 1920px;
        height: 1080px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .screen-title {
            font-size: 32px;
        }

        .screen-img {
            margin-top: 20px;
        }
    }
}
</style>

 

标签:基于,scale,const,缩放,适配,height,window,resize
From: https://www.cnblogs.com/webljl/p/16951460.html

相关文章