前端自适应

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

相关推荐
qq_1508419919 分钟前
3天基于VS2026的C#编程入门及动态调用CH341DLLA64读写I2C从机
开发语言·c#
Tony Bai1 小时前
Go 1.26 :go mod init 默认行为的变化与 Go 版本管理的哲学思辨
开发语言·后端·golang
xyq20241 小时前
WebForms SortedList 深度解析
开发语言
Hx_Ma161 小时前
测试题(三)
java·开发语言·后端
CHANG_THE_WORLD2 小时前
深入理解C语言指针:从源码到汇编的彻底剖析
c语言·开发语言·汇编
星火开发设计2 小时前
序列式容器:deque 双端队列的适用场景
java·开发语言·jvm·c++·知识
码农葫芦侠2 小时前
Rust学习教程2:基本语法
开发语言·学习·rust
键盘鼓手苏苏3 小时前
Flutter for OpenHarmony 实战:Envied — 环境变量与私钥安全守护者
开发语言·安全·flutter·华为·rust·harmonyos
特种加菲猫3 小时前
C++核心语法入门:从命名空间到nullptr的全面解析
开发语言·c++
坚持就完事了3 小时前
Java泛型
java·开发语言