Two schemes of screen adaptation, super detailed

 Rem-based adaptation scheme

What is rem?

rem refers to the unit of the font size relative to the root element. In the daily development process, we usually set the font of the root element (html/body) to 10px, which is convenient for us to calculate (at this time, 1rem of the child element is equivalent to 10px) .

Applicable scene

A web application with an unfixed aspect ratio, suitable for most business scenarios

Project combat

1. install dependencies

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

postcss-pxtorem is a plug-in for PostCSS, which is used to generate rem units from pixel units. autoprefixer browser prefix processing plug-in amfe-flexible scalable layout scheme replaces the original lib-flexible and selects viewport compatible with many current browsers

2. Create a postcss.config.js file in the project root directory

module.exports = {
 plugins: {
  autoprefixer: {
   overrideBrowserslist: [
    "Android 4.1",
    "iOS 7.1",
    "Chrome > 31",
    "ff > 31",
    "ie >= 8",
    "last 10 versions", // last 10 versions for all major browsers
   ],
   grid: true,
  },
  "postcss-pxtorem": {
   rootValue: 192, // 1/10 of the width of the design draft, for example, the design draft is designed according to 1920, here is 192
   propList: ["*", "!border"], // convert all px to rem except border
   selectorBlackList: [".el-"], // Filter out the classes starting with .el-, without rem conversion
  },
 },
};

3. Import dependencies in the main.ts/js file

import "amfe-flexible/index.js";

4. project restart

Adaptation scheme based on scale

In CSS3, we can use the scale() method of the transform attribute to achieve the scaling effect of the element. Scaling refers to the meanings of "zooming out" and "enlarging".

transform: scaleX(x); / Scale along the x-axis direction/

transform: scaleY(y); / Scale along the y-axis direction/

transform: scale(); / Scale along the x-axis and y-axis at the same time/

Applicable scene

Web applications with a fixed aspect ratio, such as large-screen or fixed-window business applications

Project combat

1. Create a new resize.ts/js file

import { ref } from "vue";

export default function windowResize() {
 const screenRef = ref();
 const timer = ref(0);
 const scale = {
  width: "1",
  height: "1",
 };
    
 // * Design draft size (px)
 const baseWidth = 1920;
 const baseHeight = 1080;

 // * The ratio to be maintained (default 1.77778)
 const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));
 const calcRate = () => {
  //current aspect ratio
  const currentRate = parseFloat(
   (window.innerWidth / window.innerHeight).toFixed(5)
  );
  if (screenRef.value) {
   if (currentRate > baseProportion) {
    // means wider
    scale.width = (
     (window.innerHeight * baseProportion) /
     baseWidth
    ).toFixed(5);
    scale.height = (window.innerHeight / baseHeight).toFixed(5);
    screenRef.value.style.transform = `scale(${scale.width}, ${scale.height})`;
   } else {
    // means higher
    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);
 };

 // Change window size and redraw
 const unWindowDraw = () => {
  window.removeEventListener("resize", resize);
 };

 return {
  screenRef,
  calcRate,
  windowDraw,
  unWindowDraw,
 };
}

 1. Related interface import resize.ts/js

<template>
    <div class="screen-container">
        <div class="screen-content" ref="screenRef">
            <span class="screen-title">Adaptation scheme based on scale</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(() => {
    //  Monitor browser window size changes
    windowDraw()
    calcRate()
})

onUnmounted(() => {
    unWindowDraw();
})

</script>

<style lang="scss" scoped>
.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>