前端自适应

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

相关推荐
侧耳倾听1117 小时前
java 日志框架简介
java·开发语言
zlinear数据采集卡8 小时前
数据采集卡从入门到精通(9):分辨率与精度——16位卡不等于1/65536的精度
开发语言·数据库·fpga开发·开源·c#
全栈技术负责人8 小时前
解密 MCP(Model Context Protocol):大模型时代的“Type-C”总线与三驾马车架构深度解析
开发语言·ai·架构
丰锋ff8 小时前
1.7在Qt窗口中添加右键菜单
开发语言·qt
Titan20248 小时前
Linux网络学习:套接字、UDP的封装与应用
linux·服务器·开发语言·网络·c++
鸿芯微控科技9 小时前
压电点胶阀出胶量不稳定怎么排查?驱动波形、背压、点胶重量与Python分析
开发语言·python·压电点胶阀·精密点胶·点胶重量·流体控制
原野池予9 小时前
深入Java集合框架:HashMap源码解析(JDK 8)
java·开发语言
测试运维日常笔记9 小时前
VMware vSphere、ESXi 与 vCenter Server:核心概念与关系详解
java·开发语言
m0_5474866610 小时前
《面向对象与Java程序设计》全套PPT课件2026
java·开发语言
星恒随风10 小时前
C++ 红黑树封装(二):迭代器、const_iterator 与 operator[] 完整实现 mymap 和 myset
开发语言·c++·状态模式