前端自适应

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

相关推荐
cch891814 小时前
汇编与C语言:底层对话VS高效指挥
c语言·开发语言·汇编
♪-Interpretation14 小时前
第七节:Python的内置容器
开发语言·python
551只玄猫15 小时前
【数学建模 matlab 实验报告8】回归分析
开发语言·数学建模·matlab·课程设计·实验报告
liulilittle15 小时前
OPENPPP2 1.0.0.26145 正式版发布:内核态 SYSNAT 性能飞跃 + Windows 平台避坑指南
开发语言·网络·c++·windows·通信·vrrp
消失的旧时光-194315 小时前
C++ 网络服务端主线:从线程池到 Reactor 的完整路线图
开发语言·网络·c++·线程池·并发
打瞌睡的朱尤15 小时前
js复习--考核
开发语言·前端·javascript
wjs202415 小时前
SQL SELECT DISTINCT 详解
开发语言
计算机安禾15 小时前
【数据结构与算法】第25篇:静态查找(一):顺序查找与折半查找
java·开发语言·数据结构·学习·算法·visual studio code·visual studio
cch891815 小时前
易语言与Java对比:中文编程VS跨平台王者
java·开发语言