Two Detailed Screen‑Adaptation Strategies for Vue3/Vite Projects

Rem‑Based Adaptation Solution

What is rem?

rem is a unit relative to the root element's font size; developers often set the root (html/body) font size to 10px so that 1rem equals 10px, simplifying calculations.

Applicable Scenarios

Suitable for web applications with non‑fixed aspect ratios, covering most business cases.

Project Implementation

Install dependencies

npm i postcss-pxtorem autoprefixer amfe-flexible --save-dev

The postcss-pxtorem plugin converts pixel units to rem, autoprefixer adds browser prefixes, and amfe-flexible provides a flexible layout solution that works with the viewport.

Create postcss.config.js in the project root

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        "last 10 versions" // all mainstream browsers recent 10 versions
      ]
    },
    grid: true,
    "postcss-pxtorem": {
      rootValue: 192, // design width / 10, e.g., 1920 design width => 192
      propList: ["*", "!border"], // convert all px except border to rem
      selectorBlackList: [".el-"] // exclude classes starting with .el-
    }
  }
};

In main.ts/js import the flexible layout script

import "amfe-flexible/index.js";

Scale‑Based Adaptation Solution

CSS3's transform: scale() can enlarge or shrink elements, enabling screen scaling.

Applicable Scenarios

Best for web applications with a fixed aspect ratio, such as large‑screen displays or fixed‑window business apps.

Project Implementation

Create

resize.ts/js

import { ref } from "vue";

export default function windowResize() {
  const screenRef = ref();
  const timer = ref(0);
  const scale = { width: "1", height: "1" };
  const baseWidth = 1920;
  const baseHeight = 1080;
  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));

  const calcRate = () => {
    const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5));
    if (screenRef.value) {
      if (currentRate > baseProportion) { // wider
        scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5);
        scale.height = (window.innerHeight / baseHeight).toFixed(5);
      } else { // taller
        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 };
}

Reference the utility in a component

<template>
  <div class="screen-container">
    <div class="screen-content" ref="screenRef">
      <span class="screen-title">Scale‑Based Adaptation Solution</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 scoped lang="scss">
.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>

The two approaches provide flexible solutions: the rem method adapts layouts with relative font units, while the scale method dynamically adjusts element size based on the window’s aspect ratio, both suitable for Vue3 projects using Vite.