前端自适应

<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++·算法
oioihoii1 天前
C++对象生命周期与析构顺序深度解析
java·开发语言·c++
IMPYLH1 天前
Lua 的 tonumber 函数
开发语言·笔记·后端·junit·游戏引擎·lua
It's now1 天前
BeanRegistrar 的企业级应用场景及最佳实践
java·开发语言·spring
毕设源码-赖学姐1 天前
【开题答辩全过程】以 基于Java的小区物业管理系统APP的设计与实现为例,包含答辩的问题和答案
java·开发语言
繁华似锦respect1 天前
C++ & Linux 中 GDB 调试与内存泄漏检测详解
linux·c语言·开发语言·c++·windows·算法
小徐敲java1 天前
python的FastAPI框架
开发语言·python·fastapi
lsx2024061 天前
CSS3 分页设计指南
开发语言
CHANG_THE_WORLD1 天前
Python 切片操作全面解析
开发语言·python
不会代码的小猴1 天前
C++的第十二天笔记
开发语言·c++·笔记