前端自适应

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

相关推荐
Boop_wu21 小时前
[Java EE] 多线程 -- 初阶(3)
java·开发语言
2301_7951672021 小时前
玩转Rust高级应用 如何理解 Rust 实现免疫数据竞争的关键是Send 和 Sync 这两个 trait
开发语言·算法·rust
云和数据.ChenGuang21 小时前
Python 3.14 与 PyCharm 2025.2.1 的调试器(PyDev)存在兼容性问题
开发语言·python·pycharm
Mr.Jessy1 天前
Web APIs 学习第六天:BOM、location对象与本地存储
开发语言·前端·javascript·学习·web api·bom
LIZhang20161 天前
基于ffmpeg8.0录制mp4文件
开发语言·c++
_OP_CHEN1 天前
C++进阶:(九)深度剖析unordered_map 与 unordered_set容器
开发语言·c++·stl容器·哈希表·哈希桶·unordered_map·unordered_set
七夜zippoe1 天前
Java并发编程基石:深入理解JMM(Java内存模型)与Happens-Before规则
java·开发语言·spring·jmm·happens-before
Mark Studio1 天前
QT linux 静态编译问题记录
开发语言·qt
无敌最俊朗@1 天前
C++-Qt-音视频-基础问题01
开发语言·c++
kyle~1 天前
C++---万能指针 void* (不绑定具体数据类型,能指向任意类型的内存地址)
开发语言·c++