前端自适应

<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 小时前
C#:重载窗体构造函数
开发语言·c#
花归去9 小时前
Vue Router 的导航守卫
开发语言·前端·javascript
嵌入式×边缘AI:打怪升级日志9 小时前
Libmodbus 源码总体分析:框架、数据结构与核心函数详解
开发语言·数据结构·php
Y_039 小时前
浅谈Java虚拟机JVM
java·开发语言·jvm
我命由我123459 小时前
JUnit - 自定义 Rule
android·java·开发语言·数据库·junit·java-ee·android-studio
电商API&Tina9 小时前
【电商API】淘宝/天猫拍立淘(按图搜索商品)API 全解析
大数据·开发语言·数据库·人工智能·json·图搜索算法
XerCis9 小时前
Python读取硬盘信息pySMART——调用smartctl
开发语言·python·硬件架构
多多*9 小时前
程序设计工作室1月28日内部训练赛 题解
java·开发语言·windows·哈希算法·散列表
2501_915921439 小时前
在没有源码的前提下,怎么对 Swift 做混淆,IPA 混淆
android·开发语言·ios·小程序·uni-app·iphone·swift
weixin_446504229 小时前
Akshare:一个实用的免费金融数据Python库
开发语言·python·金融