前端自适应

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

相关推荐
yoothey7 分钟前
报废审批流规则引擎设计——责任链模式完整实现
linux·开发语言·bash
geovindu23 分钟前
python: Functional Options Pattern
开发语言·后端·python·设计模式·惯用法模式·函数式选项模式
wuyk55530 分钟前
24. C 语言模块化:不是拆几个.c 文件那么简单
c语言·开发语言·stm32·单片机
凯瑟琳.奥古斯特1 小时前
K次取反最大化数组和解法(力扣1005)
开发语言·c++·算法·leetcode·职场和发展
AC赳赳老秦1 小时前
防火墙规则批量配置实战:OpenClaw 自动生成模板、批量下发与合规性校验全解析
java·开发语言·人工智能·python·github·php·openclaw
☆cwlulu2 小时前
调试排查工具介绍(gdb、strace、Valgrind等)
开发语言·c++·嵌入式硬件·ubuntu
C语言小火车2 小时前
C++ 快速排序(Quick Sort)深度精讲:分治思想、Lomuto 分区法及三数取中优化,面试手撕必会
c语言·开发语言·c++·面试·排序算法·快速排序
sycmancia2 小时前
Qt——多线程间的互斥
开发语言·qt
一知半解仙2 小时前
2026年彻底免费的辅助编程Agent大模型汇总
开发语言·人工智能·开源
Mr-Wanter3 小时前
wsl2 jdk管理工具之sdkman
java·开发语言·sdkman