【工作笔记】不明确最终像素比的情况下的自适应大屏解决方案

原创

已于 2022-05-10 15:13:53 修改 · 508 阅读

于 2022-05-10 14:59:42 首次发布

本文探讨了在不明确最终像素比的情况下，实现大屏自适应的两种策略：1) 使用`transform: scale`缩放，优点是开发简便、不影响性能，但可能导致图像模糊；2) 利用`rem`单位，能实现高清显示，但开发相对复杂且性能稍受影响。在最终像素比确定后，可以选择更适合的方案。

我也不知道为什么会不明确.....随手一下，方便下次抄

需求：大屏需铺满屏幕，不能出现滚动条，白边，布局错乱等问题。

设计稿为1920*1080

方案1：利用transform的scale直接缩放。

整一个缩放组件

<template>
  <div class="screen-adapter" id="screenAdapter" :style="style">
    <slot />
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
// 入参为设计稿宽高
const props = defineProps({
  width: {
    type: String,
    default: "1920",
  },
  height: {
    type: String,
    default: "1080",
  },
});
const style = reactive({
  width: props.width + "px",
  height: props.height + "px",
  transform: "scale(1) ",
});
const Debounce = (fn, t) => {
  const delay = t || 500;
  let timer;
  return function () {
    const args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    const context = this;
    timer = setTimeout(() => {
      timer = null;
      fn.apply(context, args);
    }, delay);
  };
};

// 获取放大缩小比例
const getScale =

标签

#前端