前端自适应

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

相关推荐
KeithTsui24 分钟前
GCC C语言整数转换的理解(Understanding of Integer Conversions in C with GCC)
c语言·开发语言·算法
秉承初心26 分钟前
Node.js 开发 JavaScript SDK 包的完整指南(AI)
开发语言·javascript·node.js
云天徽上2 小时前
【数据可视化-96】使用 Pyecharts 绘制主题河流图(ThemeRiver):步骤与数据组织形式
开发语言·python·信息可视化·数据分析·pyecharts
quaer3 小时前
print(2 ** 3)
开发语言·python
Tipriest_3 小时前
C++ csignal库详细使用介绍
开发语言·c++·csignal·信号与异常
kyle~4 小时前
C++---多态(一个接口多种实现)
java·开发语言·c++
芜青4 小时前
JavaScript手录18-ajax:异步请求与项目上线部署
开发语言·javascript·ajax
一个会的不多的人5 小时前
C# NX二次开发:面收集器控件和曲线收集器控件详解
开发语言·c#
Freak嵌入式5 小时前
一文速通 Python 并行计算:教程总结
开发语言·python
2401_837088505 小时前
setup 语法糖核心要点
开发语言·前端·javascript