前端自适应

<template>

<router-view/>

</template>

<style>

* {

margin: 0;

padding: 0;

}

#app{

width: 100%;

height: 100%;

}

html, body, main {

width: 100%;

height: 100%;

}

@media only screen and (max-aspect-ratio: 16/10) {

body {

height: 90%;

}

}

@media only screen and (max-width: 860px) {

html {

zoom: 0.4;

}

}

@media only screen and (min-width: 860px){

html {

zoom: 0.45;

}

}

@media only screen and (min-width: 1024px) {

html {

zoom: 0.5;

}

}

@media only screen and (min-width: 1366px) {

html {

zoom: 0.7;

}

}

@media only screen and (min-width: 1920px) and (min-height: 860px){

html {

zoom: 1;

}

}

@media only screen and (min-width: 2880px) {

html {

zoom: 1.3;

}

}

@media only screen and (min-width: 3840px) {

html {

zoom: 2;

}

}

</style>

相关推荐
智商低情商凑17 小时前
Go学习之 - Goroutines和channels
开发语言·学习·golang
半桶水专家17 小时前
Go 语言时间处理(time 包)详解
开发语言·后端·golang
编程点滴17 小时前
Go 重试机制终极指南:基于 go-retry 打造可靠容错系统
开发语言·后端·golang
实心儿儿17 小时前
C++ —— 模板进阶
开发语言·c++
萧鼎18 小时前
Python PyTesseract OCR :从基础到项目实战
开发语言·python·ocr
二川bro19 小时前
第57节:Three.js企业级应用架构
开发语言·javascript·架构
sali-tec19 小时前
C# 基于halcon的视觉工作流-章62 点云采样
开发语言·图像处理·人工智能·算法·计算机视觉
这人很懒没留下什么20 小时前
SpringBoot2.7.4整合Oauth2
开发语言·lua
ZHOUZAIHUI20 小时前
WSL(Ubuntu24.04) 安装PostgreSQL
开发语言·后端·scala
欧阳x天20 小时前
C++入门(二)
开发语言·c++