前端自适应

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

相关推荐
xb113218 分钟前
C#委托详解
开发语言·c#
brent42318 分钟前
DAY50复习日
开发语言·python
木头程序员27 分钟前
前端(包含HTML/JavaScript/DOM/BOM/jQuery)基础-暴力复习篇
开发语言·前端·javascript·ecmascript·es6·jquery·html5
Data_agent38 分钟前
Cocbuy 模式淘宝 / 1688 代购系统(欧美市场)搭建指南
开发语言·python
lsx2024061 小时前
《Foundation 下拉菜单》
开发语言
期待のcode1 小时前
认识Java虚拟机
java·开发语言·jvm
raining_peidx1 小时前
xxljob源码
java·开发语言
肥猪猪爸1 小时前
双重检查锁(DCL)与 volatile 的关键作用
java·开发语言·单例模式
yaoxin5211231 小时前
289. Java Stream API - 从字符串的字符创建 Stream
java·开发语言
癫狂的兔子1 小时前
【Python】【Flask】抽奖功能
开发语言·python·flask