前端自适应

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

相关推荐
起予者汝也19 小时前
Python基础入门
开发语言·python
芯联智造19 小时前
【stm32协议外设篇】- SU03T 智能语音模块
c语言·开发语言·stm32·单片机·嵌入式硬件
川石课堂软件测试19 小时前
Python | 高阶函数基本应用及Decorator装饰器
android·开发语言·数据库·python·功能测试·mysql·单元测试
lqqjuly19 小时前
Matlab2025a实现双目相机标定~业余版
开发语言·matlab·相机标定·双目相机
Brianna Home19 小时前
现代C++:从性能泥潭到AI基石
开发语言·c++·算法
2301_7965125219 小时前
Rust编程学习 - 自动解引用的用处,如何进行“解引用”(Deref) 是“取引用”(Ref) 的反操作
开发语言·学习·rust
qq192572302720 小时前
c++特性
开发语言·c++·算法
weixin_3077791320 小时前
AWS Elastic Beanstalk 实现 Java 应用高可用部署指南
java·开发语言·云计算·aws·web app
nvd1120 小时前
asyncio.run() vs asyncio.gather():启动器与聚合器, 为何Jupyter notebook里能直接使用await?
开发语言·python·jupyter
文人sec20 小时前
使用python-pandas-openpyxl编写运营查询小工具
开发语言·python·pandas