前端自适应

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

相关推荐
jiaguangqingpanda20 分钟前
Day22-20260118
java·开发语言
Ulyanov37 分钟前
战场地形生成与多源数据集成
开发语言·python·算法·tkinter·pyside·pyvista·gui开发
风生u39 分钟前
bpmn 的理解和元素
java·开发语言·工作流·bpmn
C+-C资深大佬1 小时前
C++数据类型
开发语言·c++·算法
ID_180079054731 小时前
日本乐天商品详情API接口的请求构造与参数说明
开发语言·python·pandas
派大鑫wink1 小时前
【Day34】Servlet 进阶:会话管理(Cookie vs Session)
java·开发语言·学习方法
猫天意2 小时前
【深度学习小课堂】| torch | 升维打击还是原位拼接?深度解码 PyTorch 中 stack 与 cat 的几何奥义
开发语言·人工智能·pytorch·深度学习·神经网络·yolo·机器学习
crossaspeed2 小时前
Java-线程池(八股)
java·开发语言
niaiheni2 小时前
PHP文件包含
开发语言·php
初次见面我叫泰隆2 小时前
Qt——1、初识Qt
开发语言·c++·qt