前端自适应

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

相关推荐
snow@li6 分钟前
d3.js:学习积累
开发语言·前端·javascript
编程岁月11 分钟前
java面试-0203-java集合并发修改异常、快速/安全失败原理、解决方法?
java·开发语言·面试
CoderCodingNo25 分钟前
【GESP】C++五级考试大纲知识点梳理, (3-4) 链表-双向循环链表
开发语言·c++·链表
llz_11234 分钟前
第五周作业(JavaScript)
开发语言·前端·javascript
W.Y.B.G1 小时前
JavaScript 计算闰年方法
开发语言·前端·javascript
liu****1 小时前
笔试强训(二)
开发语言·数据结构·c++·算法·哈希算法
无限进步_1 小时前
扫雷游戏的设计与实现:扫雷游戏3.0
c语言·开发语言·c++·后端·算法·游戏·游戏程序
qq_433554542 小时前
C++ 完全背包
开发语言·c++·算法
青铜弟弟2 小时前
R语言利用Export包导出pptx格式的文件有错误的原因
开发语言·r语言
Siren_dream2 小时前
python进阶_Day8
开发语言·python