前端自适应

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

相关推荐
天若有情6736 分钟前
【C++趣味实战】仿写Burp代理逻辑!自定义可控迭代器:拦截Intercept/放行Forward/重放Repeater全实现
java·开发语言·c++
l1t7 分钟前
DeepSeek总结的使用实体-组件-系统和基于存在性处理进行Python编程37-38
开发语言·python
迷藏4948 分钟前
Python+DuckDB:轻量级BI流水线实战
java·开发语言·python·原型模式
咋吃都不胖lyh11 分钟前
短期记忆和长期记忆都存 MySQL
android·java·开发语言
rime_neko25 分钟前
js学习笔记
开发语言·前端·javascript
caimouse38 分钟前
ReactOS 硬件资源仲裁器 (Arbiter) 完整实现计划
开发语言
新手村领路人1 小时前
在macos python中安装dlib
开发语言·python·macos
郝学胜-神的一滴1 小时前
Qt 高级开发 024:QSplitter分裂器布局精讲
开发语言·c++·qt·程序人生·用户界面
晚风吹红霞1 小时前
深入浅出C++ STL:从入门到精通的核心指南
开发语言·c++
JAVA社区2 小时前
Java高级全套教程(十四)—— SpringData超详细实战详解
java·开发语言·spring cloud·面试·职场和发展