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

Yomuki

已于 2022-05-10 15:13:53 修改

阅读量431

点赞数 1

分类专栏： web移动端笔记文章标签：前端

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

本文链接：https://blog.youkuaiyun.com/Yomuki/article/details/124687781

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

设计稿为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);
    }
    c