前端自适应

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

相关推荐
老K的Java兵器库21 小时前
Collections 工具类 15 个常用方法源码:sort、binarySearch、reverse、shuffle、unmodifiableXxx
java·开发语言·哈希算法
武子康21 小时前
Java-153 深入浅出 MongoDB 全面的适用场景分析与选型指南 场景应用指南
java·开发语言·数据库·mongodb·性能优化·系统架构·nosql
rit843249921 小时前
ES6 箭头函数:告别 `this` 的困扰
开发语言·javascript·es6
嵌入式-老费21 小时前
Easyx图形库应用(用lua开发图形界面)
开发语言·lua
ellis197021 小时前
Lua协程coroutine库用法
开发语言·lua
nwsuaf_huasir1 天前
matlab构造带通巴特沃斯滤波器进行滤波
开发语言·matlab
救救孩子把1 天前
从 JDK 8 到 JDK 23:HotSpot 垃圾回收器全景演进与深度剖析
java·开发语言·jvm·jdk
清辞8531 天前
C++入门(底层知识C与C++的不同)
开发语言·c++·算法
fqbqrr1 天前
2510C++,api设计原则,不除零
开发语言·c++
科比不来it1 天前
Go语言数据竞争Data Race 问题怎么检测?怎么解决?
开发语言·c++·golang