前端自适应

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

相关推荐
顾子茵1 分钟前
c++从入门到精通(五)--异常处理,命名空间,多继承与虚继承
开发语言·c++
南部余额11 分钟前
Python OOP核心技巧:如何正确选择实例方法、类方法和静态方法
开发语言·python
保利九里32 分钟前
数据类型转换
java·开发语言
蚂蚁在飞-36 分钟前
Golang基础知识—cond
开发语言·后端·golang
Brilliant Nemo1 小时前
Vue2项目中使用videojs播放mp4视频
开发语言·前端·javascript
TNTLWT1 小时前
Qt控件:交互控件
开发语言·qt
量化金策1 小时前
震荡指标工具
开发语言
北漂老男孩1 小时前
ChromeDriver进程泄漏问题分析与最佳实践解决方案
开发语言·爬虫
李迟1 小时前
Golang实践录:在go中使用curl实现https请求
开发语言·golang·https
运维-大白同学2 小时前
go-数据库基本操作
开发语言·数据库·golang