前端自适应

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