前端自适应

<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>

相关推荐
不想写bug呀3 小时前
多线程案例——单例模式
java·开发语言·单例模式
我不会写代码njdjnssj3 小时前
网络编程 TCP UDP
java·开发语言·jvm
李少兄9 天前
解决OSS存储桶未创建导致的XML错误
xml·开发语言·python
阿蒙Amon9 天前
《C#图解教程 第5版》深度推荐
开发语言·c#
学Linux的语莫9 天前
python基础语法
开发语言·python
暖馒9 天前
C#委托与事件的区别
开发语言·c#
嘉琪0019 天前
2025——js 面试题
开发语言·javascript·ecmascript
Jinxiansen02119 天前
Vue3 中 ref 与 reactive 使用场景总结(含对比与示例)
开发语言·javascript·ecmascript
时空自由民.9 天前
C++ 不同线程之间传值
开发语言·c++·算法
止观止9 天前
Rust智能指针演进:从堆分配到零复制的内存管理艺术
开发语言·后端·rust