前端自适应

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

相关推荐
我不会编程5558 小时前
Python Cookbook-5.1 对字典排序
开发语言·数据结构·python
李少兄8 小时前
Unirest:优雅的Java HTTP客户端库
java·开发语言·http
无名之逆9 小时前
Rust 开发提效神器:lombok-macros 宏库
服务器·开发语言·前端·数据库·后端·python·rust
似水এ᭄往昔9 小时前
【C语言】文件操作
c语言·开发语言
啊喜拔牙9 小时前
1. hadoop 集群的常用命令
java·大数据·开发语言·python·scala
xixixin_9 小时前
为什么 js 对象中引用本地图片需要写 require 或 import
开发语言·前端·javascript
W_chuanqi10 小时前
安装 Microsoft Visual C++ Build Tools
开发语言·c++·microsoft
anlogic10 小时前
Java基础 4.3
java·开发语言
A旧城以西10 小时前
数据结构(JAVA)单向,双向链表
java·开发语言·数据结构·学习·链表·intellij-idea·idea
Liudef0610 小时前
deepseek v3-0324实现SVG 编辑器
开发语言·javascript·编辑器·deepseek