看板自适应-scale方案

2024-4-12 16:20

146 字

7 分钟

vue3版本

<!--
 * @Author: yangzihua
 * @Date: 2024-04-12 15:26:36
 * @LastEditors: yangzihua
 * @LastEditTime: 2024-04-12 16:07:50
 * @Description: 
-->
<template>
  <div
    class="main-scale"
    :style="{ width: innerWidth + 'px', height: innerHeight + 'px', backgroundColor: '#010916' }"
  >
    <div class="board" :style="{ transform: `scale(${getScale()})` }">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

let innerWidth = ref(window.innerWidth);
let innerHeight = ref(window.innerHeight);

onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});

function getScale() {
  const widthBg = 1920;
  const heightBg = 1080;
  const widthScale = innerWidth.value / widthBg;
  const heightScale = innerHeight.value / heightBg;
  return Math.min(widthScale, heightScale);
}

function handleResize() {
  innerWidth.value = window.innerWidth;
  innerHeight.value = window.innerHeight;
}
</script>

<style scoped>
.main-scale {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.board {
  flex: 0 0 auto;
}
</style>

react版本-类组件


import classNames from 'classnames';
import React from 'react';
import styles from './index.less';

class Scale extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      innerWidth: window.innerWidth,
      innerHeight: window.innerHeight,
    };
  }

  componentDidMount() {
    window.addEventListener('resize', this.listenWindow);
    return () => {
      document.removeEventListener('resize', this.listenWindow);
    };
  }

  listenWindow = () => {
    this.setState({
      innerWidth: window.innerWidth,
      innerHeight: window.innerHeight,
    });
  };

  getScale = () => {
    const { widthBg = 1920, heightBg = 1080 } = this.props;
    const widthScale = window.innerWidth / widthBg;
    const heightScale = window.innerHeight / heightBg;
    return widthScale > heightScale ? heightScale : widthScale;
  };

  render() {
    const { children, mainColor = '#fff', boardStyle } = this.props;
    const scaleValue = this.getScale();
    const { innerWidth, innerHeight } = this.state;
    return (
      <div
        className={styles.main}
        style={{
          width: innerWidth,
          height: innerHeight,
          backgroundColor: mainColor,
        }}
      >
        <div
          className={classNames(styles.board, boardStyle)}
          style={{
            transform: `scale(${scaleValue})`,
          }}
        >
          {children}
        </div>
      </div>
    );
  }
}

export default Scale;


// index.less
.main {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.board {
  flex: 0 0 auto;
}

欢迎阅读！

Edgar4841

Windows Chrome

3 月前
2025-8-06 6:59:02

https://shorturl.fm/V9Lvd
Conner4257

Windows Chrome

3 月前
2025-8-06 21:49:33

https://shorturl.fm/vzSnD
Lisa4330

Windows Chrome

3 月前
2025-8-07 16:06:21

https://shorturl.fm/9ELrG
Heidi3916

Windows Chrome

3 月前
2025-8-07 23:33:21

https://shorturl.fm/r0Eus
Ingrid4399

Windows Chrome

3 月前
2025-8-08 5:24:04

https://shorturl.fm/zgyvI
Jason3802

Windows Chrome

3 月前
2025-8-09 11:51:43

https://shorturl.fm/m9QDB
Jasper4542

Windows Chrome

3 月前
2025-8-09 18:27:42

https://shorturl.fm/q6nbt
Jasmine4833

Windows Chrome

3 月前
2025-8-11 6:49:29

https://shorturl.fm/27ZWJ
Daniel3018

Windows Chrome

3 月前
2025-8-12 6:43:21

https://shorturl.fm/VxkIL
Alejandro2597

Windows Chrome

3 月前
2025-8-12 14:04:18

https://shorturl.fm/OtMZa
Anna2628

Windows Chrome

3 月前
2025-8-13 2:57:58

https://shorturl.fm/aBt9h
Hallie4988

Windows Chrome

3 月前
2025-8-16 9:25:20

https://shorturl.fm/SJMLk
Theresa1007

Windows Chrome

3 月前
2025-8-16 19:05:25

https://shorturl.fm/P2Emn
Brandon4783

Windows Chrome

3 月前
2025-8-20 18:33:38

https://shorturl.fm/W7yp9
Bella3236

Windows Chrome

3 月前
2025-8-21 7:01:10

https://shorturl.fm/Uopxl
Alaina2297

Windows Chrome

3 月前
2025-8-22 15:02:16

https://shorturl.fm/vdw2l
Ray4455

Windows Chrome

3 月前
2025-8-23 21:57:50

https://shorturl.fm/XS0FJ
Gerard4041

Windows Chrome

3 月前
2025-8-25 15:48:09

https://shorturl.fm/jArrd
Anderson11

Windows Chrome

2 月前
2025-8-27 3:00:48

https://shorturl.fm/H9gaU
Lori109

Windows Chrome

2 月前
2025-8-27 9:47:59

https://shorturl.fm/C8BWz
Carolyn3166

Windows Chrome

2 月前
2025-8-27 17:11:53

https://shorturl.fm/e6txP
Douglas3759

Windows Chrome

2 月前
2025-8-29 9:42:11

https://shorturl.fm/uRSeX
Hank847

Windows Chrome

2 月前
2025-8-31 19:36:14

https://shorturl.fm/Nzy4w
Reed1169

Windows Chrome

2 月前
2025-9-02 7:08:16

https://shorturl.fm/cbWOm
Gloria871

Windows Chrome

2 月前
2025-9-03 14:03:30

https://shorturl.fm/z1dxO
Luke3112

Windows Chrome

2 月前
2025-9-03 22:25:02

https://shorturl.fm/2PpBc
Marc1162

Windows Chrome

2 月前
2025-9-04 6:25:53

https://shorturl.fm/ohQyk
Patricia3951

Windows Chrome

2 月前
2025-9-04 18:52:10

https://shorturl.fm/7ynvG
Sophia4326

Windows Chrome

2 月前
2025-9-06 8:39:37

https://shorturl.fm/X9yM3
Christine1350

Windows Chrome

2 月前
2025-9-09 10:14:28

https://shorturl.fm/cfl1M
Genesis3695

Windows Chrome

2 月前
2025-9-09 11:43:37

https://shorturl.fm/zakU5
Gianna4015

Windows Chrome

2 月前
2025-9-09 21:16:54

https://shorturl.fm/BXZUx
Ayden3423

Windows Chrome

2 月前
2025-9-12 19:46:42

https://shorturl.fm/exzsQ
Michelle1149

Windows Chrome

2 月前
2025-9-16 17:20:20

https://shorturl.fm/SGhsi
Betty2859

Windows Chrome

2 月前
2025-9-18 5:23:42

https://shorturl.fm/db7lq
Josiah1909

Windows Chrome

2 月前
2025-9-20 16:58:04

https://shorturl.fm/OSn9U
Adria3648

Windows Chrome

2 月前
2025-9-22 10:54:50

https://shorturl.fm/Jao3Z
Ruby946

Windows Chrome

2 月前
2025-9-22 23:47:58

https://shorturl.fm/Nti2r
Beth2751

Windows Chrome

1 月前
2025-9-25 9:14:38

https://shorturl.fm/oGMWI
Roman1649

Windows Chrome

1 月前
2025-9-28 12:36:13

https://shorturl.fm/YT6pJ
Bella2407

Windows Chrome

1 月前
2025-9-29 0:04:52

https://shorturl.fm/hqAZL
Eric1870

Windows Chrome

1 月前
2025-9-29 2:08:25

https://shorturl.fm/cRPNu
Agnes2196

Windows Chrome

1 月前
2025-9-29 6:16:17

https://shorturl.fm/DHW8C
Renee205

Windows Chrome

1 月前
2025-10-02 5:58:57

https://shorturl.fm/C8X07
Avery4816

Windows Chrome

1 月前
2025-10-03 15:21:57

https://shorturl.fm/NVbJs
Pamela4288

Windows Chrome

1 月前
2025-10-04 2:47:43

https://shorturl.fm/X7SBg
Leona2149

Windows Chrome

1 月前
2025-10-06 19:29:36

https://shorturl.fm/m9T8W
Neal748

Windows Chrome

4 周前
2025-10-12 3:48:10

https://shorturl.fm/f7GGY
Debbie2019

Windows Chrome

4 周前
2025-10-15 1:33:19

https://shorturl.fm/aOch9
Monica624

Windows Chrome

3 周前
2025-10-17 3:18:47

https://shorturl.fm/ecX84
Hayden189

Windows Chrome

3 周前
2025-10-20 3:20:17

https://shorturl.fm/oNY93
Madelyn3882

Windows Chrome

3 周前
2025-10-20 14:32:11

https://shorturl.fm/oLzgk
Callie36

Windows Chrome

3 周前
2025-10-20 17:27:18

https://shorturl.fm/FNh7F
Gracie2583

Windows Chrome

3 周前
2025-10-21 23:40:00

https://shorturl.fm/Lywzm
Heather621

Windows Chrome

2 周前
2025-10-26 9:59:14

https://shorturl.fm/Jid3P
Judy3171

Windows Chrome

2 周前
2025-10-26 18:23:03

https://shorturl.fm/RuW2h
Madelyn4597

Windows Chrome

1 周前
2025-11-01 8:17:33

https://shorturl.fm/JNHXX
Andre3612

Windows Chrome

1 周前
2025-11-01 11:20:28

https://shorturl.fm/wA2u0