목차
rem 기반 적응 솔루션
rem이란?
적용 가능한 시나리오
실제 전투 프로젝트
基于scale的适配方案
适用场景
项目实战
写在最后
웹 프론트엔드 View.js Vite 프로젝트를 화면에 어떻게 적용하나요? 공유할 수 있는 두 가지 옵션

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

Sep 30, 2022 pm 06:09 PM
vue vite

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

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

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

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

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

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

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

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

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

rem 기반 적응 솔루션

rem이란?

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

적용 가능한 시나리오

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

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

실제 전투 프로젝트

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 文件中导入依赖

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>
로그인 후 복사

写在最后

推荐两个作者参与的开源项目,如果项目有帮助到你,欢迎star!

一个简单的基于Vue3、TS、Vite、qiankun技术栈的后台管理项目www.xkxk.tech

一个基于Vue3、Vite的炫酷大屏项目2. 프로젝트 루트 디렉토리에 postcss.config.js 파일을 생성하세요

Vite 프로젝트를 화면에 어떻게 적용하나요? 공유할 수 있는 두 가지 옵션rrreee3. main.ts/js에서 종속성을 가져옵니다. > filerrreee

4. 프로젝트 재시작🎜

🎜Scale 기반 적응 솔루션🎜🎜🎜CSS3에서는 변환 속성의 scale() 메소드를 사용하여 스케일링을 달성할 수 있습니다. 요소의 효과. 줌(Zoom)은 '줌 아웃', '줌 인'의 의미를 가리킨다. 🎜
  • transform: scaleX(x); / x축 방향으로 크기 조정/
  • transform: scaleY(y) / y축 방향으로 크기 조정/
  • transform : scale(); / x축과 y축을 동시에 크기 조정/

🎜적용 가능한 시나리오🎜🎜🎜웹 애플리케이션 대형 화면 또는 고정 창 비즈니스 애플리케이션과 같은 고정된 종횡비🎜🎜Vite 프로젝트를 화면에 어떻게 적용하나요? 공유할 수 있는 두 가지 옵션🎜

🎜실제 전투 프로젝트🎜🎜🎜1. 새로운 resize.ts/js 파일을 생성하세요🎜 🎜Vite 프로젝트를 화면에 어떻게 적용하나요? 공유할 수 있는 두 가지 옵션🎜rrreee🎜2 . 관련 인터페이스 소개 resize.ts /js🎜🎜Vite 프로젝트를 화면에 어떻게 적용하나요? 공유할 수 있는 두 가지 옵션 🎜rrreee

마지막에 작성🎜🎜두 작가가 참여한 오픈소스 프로젝트를 추천합니다. 프로젝트가 도움이 되셨다면, 스타에 오신 것을 환영합니다! 🎜🎜Vue3, TS, Vite 및 qiankun 기술 스택을 기반으로 하는 간단한 백엔드 관리 프로젝트: www.xkxk.tech🎜🎜🎜A 기반 Vue3, Vite의 멋진 대형 화면 프로젝트: 🎜screen.xkxk.tech🎜🎜🎜(학습 영상 공유: 🎜웹 프론트엔드 개발🎜, 🎜기본 프로그래밍 영상🎜)🎜

위 내용은 Vite 프로젝트를 화면에 어떻게 적용하나요? 공유할 수 있는 두 가지 옵션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Vue에서 부트 스트랩을 사용하는 방법 Vue에서 부트 스트랩을 사용하는 방법 Apr 07, 2025 pm 11:33 PM

vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.

Vue 용 버튼에 기능을 추가하는 방법 Vue 용 버튼에 기능을 추가하는 방법 Apr 08, 2025 am 08:51 AM

HTML 템플릿의 버튼을 메소드에 바인딩하여 VUE 버튼에 함수를 추가 할 수 있습니다. 메소드를 정의하고 VUE 인스턴스에서 기능 로직을 작성하십시오.

Vue에서 시계를 사용하는 방법 Vue에서 시계를 사용하는 방법 Apr 07, 2025 pm 11:36 PM

vue.js의 시계 옵션을 사용하면 개발자가 특정 데이터의 변경 사항을들을 수 있습니다. 데이터가 변경되면 콜백 기능을 트리거하여 업데이트보기 또는 기타 작업을 수행합니다. 구성 옵션에는 즉시 콜백을 실행할지 여부와 DEEP를 지정하는 즉시 포함되며, 이는 객체 또는 어레이에 대한 변경 사항을 재귀 적으로 듣는 지 여부를 지정합니다.

Vue가 이전 페이지로 돌아 오는 방법 Vue가 이전 페이지로 돌아 오는 방법 Apr 07, 2025 pm 11:30 PM

vue.js는 이전 페이지로 돌아갈 수있는 네 가지 방법이 있습니다. $ router.go (-1) $ router.back () 사용 & lt; router-link to = & quot;/quot; Component Window.history.back () 및 메소드 선택은 장면에 따라 다릅니다.

Vue 다중 페이지 개발은 무엇을 의미합니까? Vue 다중 페이지 개발은 무엇을 의미합니까? Apr 07, 2025 pm 11:57 PM

VUE 멀티 페이지 개발은 vue.js 프레임 워크를 사용하여 응용 프로그램을 구축하는 방법입니다. 여기서 응용 프로그램은 별도의 페이지로 나뉩니다. 코드 유지 보수 : 응용 프로그램을 여러 페이지로 분할하면 코드를보다 쉽게 ​​관리하고 유지 관리 할 수 ​​있습니다. 모듈 식 : 각 페이지는 쉬운 재사용 및 교체를 위해 별도의 모듈로 사용할 수 있습니다. 간단한 라우팅 : 페이지 간의 탐색은 간단한 라우팅 구성을 통해 관리 할 수 ​​있습니다. SEO 최적화 : 각 페이지에는 자체 URL이있어 SEO가 도움이됩니다.

React vs. Vue : Netflix는 어떤 프레임 워크를 사용합니까? React vs. Vue : Netflix는 어떤 프레임 워크를 사용합니까? Apr 14, 2025 am 12:19 AM

NetflixusesAcustomFrameworkCalled "Gibbon"BuiltonReact, NotreactorVuedirectly.1) TeamExperience : 2) ProjectComplexity : vueforsimplerProjects, 3) CustomizationNeeds : reactoffersmoreflex.4)

vue.js로 JS 파일을 참조하는 방법 vue.js로 JS 파일을 참조하는 방법 Apr 07, 2025 pm 11:27 PM

vue.js에서 JS 파일을 참조하는 세 가지 방법이 있습니다. & lt; script & gt; 꼬리표;; mounted () 라이프 사이클 후크를 사용한 동적 가져 오기; Vuex State Management Library를 통해 수입.

Vue Traversal 사용 방법 Vue Traversal 사용 방법 Apr 07, 2025 pm 11:48 PM

vue.js가 트래버스 어레이 및 객체에 대한 세 가지 일반적인 방법이 있습니다. V- 결합 지시문은 V-FOR와 함께 사용하여 각 요소의 속성 값을 동적으로 설정할 수 있습니다. .MAP 메소드는 배열 요소를 새 배열로 변환 할 수 있습니다.

See all articles