前端自适应

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

相关推荐
峥无24 分钟前
《二叉搜索树:动态数据管理的利器,平衡树的基石》
开发语言·c++·二叉搜索树
CoderCodingNo25 分钟前
【GESP】C++五级真题(数论, 贪心思想考点) luogu-B4070 [GESP202412 五级] 奇妙数字
开发语言·c++·算法
一刻钟.30 分钟前
DataGridView和定时器
开发语言·c#
墨辰JC38 分钟前
C语言可变参数讲解:stdarg.h应用
c语言·开发语言·蓝桥杯·内存·蓝桥杯嵌入式
Larry_Yanan43 分钟前
Qt多进程(八)消息队列(基于文件)
开发语言·qt
毕设源码-钟学长1 小时前
【开题答辩全过程】以 基于java旅游网站的设计与实现为例,包含答辩的问题和答案
java·开发语言·旅游
0和1的舞者1 小时前
接口自动化测试详解(二):requests 请求封装与 Pytest 框架全实战
开发语言·自动化测试·python·测试开发·接口·测试
C语言小火车1 小时前
C++右值引用与转移语义详解
c语言·开发语言
CoderCodingNo1 小时前
【GESP】C++五级真题(数论考点) luogu-P11961 [GESP202503 五级] 原根判断
开发语言·c++
乾元1 小时前
网络切片的自动化配置与 SLA 保证——5G / 专网场景中,从“逻辑隔离”到“可验证承诺”的工程实现
运维·开发语言·网络·人工智能·网络协议·重构