前端自适应

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

相关推荐
混迹网络的权某几秒前
蓝桥杯真题——三角回文数(C语言)
c语言·开发语言·算法·蓝桥杯·改行学it
爱上语文7 分钟前
苍穹外卖 商家取消、派送、完成订单
java·开发语言·spring boot·后端
墨柳烟15 分钟前
ABAQUS高亮显示网格节点方法:Python为每个节点建立集合
开发语言·前端·python·abaqus
小笨猪-1 小时前
RabbitMQ高级特性
java·开发语言·redis·rabbitmq
神仙别闹1 小时前
基于 Java 语言双代号网络图自动绘制系统
java·开发语言
猫爪笔记1 小时前
JAVA基础:单元测试;注解;枚举;网络编程 (学习笔记)
java·开发语言·单元测试
API快乐传递者1 小时前
用 Python 爬取淘宝商品价格信息时需要注意什么?
java·开发语言·爬虫·python·json
fengbizhe1 小时前
qt获取本机IP和定位
开发语言·c++·qt·tcp/ip
yang_shengy1 小时前
【JavaEE】认识进程
java·开发语言·java-ee·进程
无敌最俊朗@2 小时前
unity3d————屏幕坐标,GUI坐标,世界坐标的基础注意点
开发语言·学习·unity·c#·游戏引擎