使用说明

script

import { autoScale } from '@ansstory/fit-screen'
const option = {
  width: 1920,
  height: 1080,
}
// 在页面加载后调用并传入需要缩放的元素和宽高
const { updateOptions, removeResize } = autoScale('.screen-content', option)
// 更新Option
updateOptions(option)
// 移除resize监听
removeResize()

html

<div style="width: 100vw; height: 100vh; overflow: hidden; background-color: #09233f">
  <div class="screen-content" style="background: #09255f">
    <button>全屏切换</button>
  </div>
</div>

其他方法

import { openFullscreen, exitFullscreen } from '@ansstory/fit-screen'
let isFullscreen = false
const btn = document.querySelector('button')
// 打开退出全屏 返回是否全屏
btn.addEventListener('click', () => (isFullscreen = isFullscreen ? exitFullscreen() : openFullscreen()))

scss 方案

@import '@ansstory/fit-screen/style.screenScssUtil/index.scss';
// 或者
@use '@ansstory/fit-screen/style.screenScssUtil/index.scss' as *;
$designWidth: 1920; // 设计稿宽高 默认1920
$designHeight: 1080; // 设计稿宽高 默认1080
.box {
  width: vw(100);
  height: vh(100);
  background: #09255f;
}