前端自适应

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

相关推荐
智航GIS11 分钟前
10.7 pyspider 库入门
开发语言·前端·python
跟着珅聪学java16 分钟前
JavaScript 底层原理
java·开发语言
项目題供诗21 分钟前
C语言基础(二)
c语言·开发语言
J_liaty25 分钟前
RabbitMQ面试题终极指南
开发语言·后端·面试·rabbitmq
JosieBook35 分钟前
【开源】基于 C# 和 Halcon 机器视觉开发的车牌识别工具(附带源码)
开发语言·c#
逑之1 小时前
C语言笔记14:结构体、联合体、枚举
c语言·开发语言·笔记
崇山峻岭之间1 小时前
Matlab学习记录30
开发语言·学习·matlab
stillaliveQEJ1 小时前
【JavaEE】Spring IoC(二)
java·开发语言·spring
民乐团扒谱机1 小时前
【微实验】MATLAB 仿真实战:多普勒效应 —— 洒水车音乐的音调变化仿真
开发语言·matlab·多普勒效应·多普勒频移