前端自适应

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

相关推荐
天若有情6733 小时前
【python】Python爬虫入门教程:使用requests库
开发语言·爬虫·python·网络爬虫·request
寒水馨4 小时前
Java 17 新特性解析与代码示例
java·开发语言·jdk17·新特性·java17
启山智软4 小时前
选用Java开发商城的优势
java·开发语言
秃然想通4 小时前
掌握Python三大语句:顺序、条件与循环
开发语言·python·numpy
##学无止境##4 小时前
Maven 从入门到精通:Java 项目构建与依赖管理全解析(上)
java·开发语言·maven
魔都吴所谓5 小时前
【go】语言的匿名变量如何定义与使用
开发语言·后端·golang
骇客野人5 小时前
使用python写一套完整的智能体小程序
开发语言·python
绿炮火5 小时前
【MATLAB】(二)基础知识
开发语言·算法·matlab
你我约定有三5 小时前
分布式微服务--万字详解 微服务的各种负载均衡全场景以注意点
java·开发语言·windows·分布式·微服务·架构·负载均衡