前端自适应

<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 天前
JavaSE-03-集合框架(详细版)
java·开发语言·python
我命由我123451 天前
Android Framework P3 - MediaServer 进程、认识 ServiceManager 进程
android·c语言·开发语言·c++·visualstudio·visual studio·android runtime
:1211 天前
java基础---一些没注意的
java·开发语言
yuhuofei20211 天前
【Python入门】Python中的输入与输出
开发语言·python
imuliuliang1 天前
Laravel 2.x:PHP框架的早期革新之路
开发语言·php·laravel
跨境数据猎手1 天前
跨境商城反向海淘系统开发全流程逻辑(下)
开发语言·php
川冰ICE1 天前
Python爬虫实战㉘|综合实战3,新闻热点追踪与舆情分析系统
开发语言·爬虫·python
AI人工智能+电脑小能手1 天前
【大白话说Java面试题 第70题】【JVM篇】第30题:垃圾回收器是怎样寻找 GC Roots 的?
java·开发语言·jvm·面试
晚烛1 天前
CANN 数据流水线优化:从数据加载到模型输入的端到端加速
开发语言·网络·人工智能·python·深度学习
biter down1 天前
1.什么是GUI自动化测试
开发语言