前端自适应

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

相关推荐
小灰灰搞电子4 分钟前
Rust可以取代C++么?
开发语言·c++·rust
cat三三8 分钟前
java之异常
java·开发语言
奇树谦10 分钟前
【Qt实战】实现图片缩放、平移与像素级查看功能
开发语言·qt
我命由我1234517 分钟前
Python Flask 开发问题:ImportError: cannot import name ‘Markup‘ from ‘flask‘
开发语言·后端·python·学习·flask·学习方法·python3.11
wjs202420 分钟前
Go 语言指针
开发语言
wuguan_32 分钟前
C#:多态函数重载、态符号重载、抽象、虚方法
开发语言·c#
小信啊啊32 分钟前
Go语言数组与切片的区别
开发语言·后端·golang
计算机学姐1 小时前
基于php的摄影网站系统
开发语言·vue.js·后端·mysql·php·phpstorm
全栈陈序员1 小时前
【Python】基础语法入门(二十)——项目实战:从零构建命令行 To-Do List 应用
开发语言·人工智能·python·学习