Vite 프로젝트를 화면에 어떻게 적용하나요? 공유할 수 있는 두 가지 옵션-View.js-php.cn

Vite 프로젝트를 화면에 어떻게 적용하나요? 다음 기사에서는 Vite 프로젝트의 화면 적용을 위한 두 가지 솔루션을 공유할 것입니다. 매우 자세하게 설명되어 있습니다.

Vite 프로젝트를 화면에 어떻게 적용하나요? 공유할 수 있는 두 가지 옵션

최근 프로젝트 팀의 학생인 샤오메이는 어려운 문제에 직면한 것 같아 항상 우울해 보입니다.

우리는 모두 프로젝트 팀이고 서로 돕고 문제를 함께 해결해야 한다는 의도로 Xiaomei에게 메시지를 보냈습니다.

나: "요즘 별로 행복하지 않은 것 같은데, 문제가 생겼나요?"

Xiaomei: "최근 vue3 프로젝트의 화면 적응에 대한 정보를 확인했는데 온라인 정보가 다음과 같습니다. 모두 vue2+webpack과 관련되어 있습니다. Vite 프로젝트에 적응하는 방법을 모르시나요? o(╥﹏╥)o”. [관련 추천: vuejs 동영상 튜토리얼]

나: "알았어, 형에게 맡겨, 내가 해결하도록 도와줄게!"

Xiaomei: "❤( ´･ᴗ･` )❤"

I 기사가 좋다고 생각하거나 자신의 발전에 도움이 될 수 있으니 좋아요와 수집을 환영합니다! ❤❤❤

rem 기반 적응 솔루션

rem이란?

rem은 일상적인 개발 과정에서 루트 요소(html/body)의 글꼴을 계산하기 편리한 10px로 설정하는 경우가 많습니다. 시간, 하위 요소의 1rem은 10px에 해당합니다).

적용 가능한 시나리오

고정된 화면 비율이 없는 웹 애플리케이션, 대부분의 비즈니스 시나리오에 적합

Vite 프로젝트를 화면에 어떻게 적용하나요? 공유할 수 있는 두 가지 옵션

실제 전투 프로젝트

1. 설치 종속성

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

로그인 후 복사

postcss-pxtorem은 다음을 위한 플러그인입니다. Rem 단위로 픽셀 단위를 생성하는 데 사용되는 PostCSS
autoprefixer 브라우저 접두사 처리 플러그인
amfe-flexible 확장 가능한 레이아웃 솔루션은 원래 lib-flexible을 대체하고 다음과 호환되는 뷰포트를 사용합니다. 현재 많은 브라우저 lib-flexible 选用了当前众多浏览器兼容的viewport

2、项目根目录创建 postcss.config.js 文件

Vite 프로젝트를 화면에 어떻게 적용하나요? 공유할 수 있는 두 가지 옵션

module.exports = {
    plugins: {
        autoprefixer: {
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8",
                "last 10 versions", // 所有主流浏览器最近10版本用
            ],
            grid: true,
        },
        "postcss-pxtorem": {
            rootValue: 192, // 设计稿宽度的1/ 10 例如设计稿按照 1920设计 此处就为192
            propList: ["*", "!border"], // 除 border 外所有px 转 rem
            selectorBlackList: [".el-"], // 过滤掉.el-开头的class，不进行rem转换
        },
    },
};

로그인 후 복사

3、main.ts/js 文件中导入依赖

1	`import` `"amfe-flexible/index.js";`

로그인 후 복사

4、项目重启

基于scale的适配方案

在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。

transform: scaleX(x); / 沿x轴方向缩放/
transform: scaleY(y); / 沿y轴方向缩放/
transform: scale(); / 同时沿x轴和y轴缩放/

适用场景

固定宽高比的Web应用，如大屏或者固定窗口业务应用

Vite 프로젝트를 화면에 어떻게 적용하나요? 공유할 수 있는 두 가지 옵션

项目实战

1、新建resize.ts/js文件

Vite 프로젝트를 화면에 어떻게 적용하나요? 공유할 수 있는 두 가지 옵션

import { ref } from "vue";
 
export default function windowResize() {
    // * 指向最外层容器
    const screenRef = ref();
    // * 定时函数
    const timer = ref(0);
    // * 默认缩放值
    const scale = {
        width: "1",
        height: "1",
    };
     
    // * 设计稿尺寸（px）
    const baseWidth = 1920;
    const baseHeight = 1080;
 
    // * 需保持的比例（默认1.77778）
    const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));
    const calcRate = () => {
        // 当前宽高比
        const currentRate = parseFloat(
            (window.innerWidth / window.innerHeight).toFixed(5)
        );
        if (screenRef.value) {
            if (currentRate > baseProportion) {
                // 表示更宽
                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 {
                // 表示更高
                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,
    };
}

로그인 후 복사

2、相关界面引入resize.ts/js

Vite 프로젝트를 화면에 어떻게 적용하나요? 공유할 수 있는 두 가지 옵션

<template>
    <div>
        <div>
            <span>基于scale的适配方案</span>
            <img  src="/static/imghw/default1.png" data-src="https://img2.baidu.com/it/u=1297807229,3828610143&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" class="lazy" alt="Vite 프로젝트를 화면에 어떻게 적용하나요? 공유할 수 있는 두 가지 옵션" >
        </div>
    </div>
</template>
 
<script>
import windowResize from &#39;../../utils/resize&#39;;
import {onMounted, onUnmounted} from &#39;vue&#39;;
 
const { screenRef, calcRate, windowDraw, unWindowDraw } = windowResize()
 
onMounted(() => {
    // 监听浏览器窗口尺寸变化
    windowDraw()
    calcRate()
})
 
onUnmounted(() => {
    unWindowDraw();
})
 
</script>
 
<style>
.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>