前端自适应

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

相关推荐
耶耶耶耶耶~9 分钟前
Modern C++ 特性小结
开发语言·c++
Whisper_Sy43 分钟前
Flutter for OpenHarmony移动数据使用监管助手App实战 - 周报告实现
开发语言·javascript·网络·flutter·php
Sylvia-girl1 小时前
线程的死锁【了解】
java·开发语言·jvm
Elias不吃糖1 小时前
java开发的三层架构
java·开发语言·架构
养海绵宝宝的小蜗1 小时前
Python第二次作业
开发语言·python
郝学胜-神的一滴2 小时前
深入理解Linux套接字(Socket)编程:从原理到实践
linux·服务器·开发语言·网络·c++·程序人生·算法
向前V2 小时前
Flutter for OpenHarmony轻量级开源记事本App实战:笔记编辑器
开发语言·笔记·python·flutter·游戏·开源·编辑器
时艰.2 小时前
JVM — Java 类加载机制
java·开发语言·jvm
小小码农Come on2 小时前
QT中窗口位置、相对位置、绝对位置
android·开发语言·qt
diediedei2 小时前
C++中的适配器模式变体
开发语言·c++·算法