【屏幕自适应页面适配问题】CSS的@media，为了适应1440×900的屏幕，使用@media解决问题

bug修改实例

<template>
  <div id="deptAllDown" style="height: 400px;width:880px"/>
</template>

为了适应1440×900的屏幕，使用@media解决问题

参考：
链接: CSS3 @media 查询
链接: CSS的@media与@media screen，媒体查询

CSS3 @media 查询

定义和使用
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

width 规定目标显示区域的宽度。

可使用 “min-” 和 “max-” 前缀。

例子：media=“screen and (min-width:500px)”

height 规定目标显示区域的高度。

可使用 “min-” 和 “max-” 前缀。

例子：media=“screen and (max-height:700px)”

device-width 规定目标显示器/纸张的宽度。

可使用 “min-” 和 “max-” 前缀。

例子：media=“screen and (device-width:500px)”

device-height 规定目标显示器/纸张的高度。

可使用 “min-” 和 “max-” 前缀。

例子：media=“screen and (device-height:500px)”

orientation 规定目标显示器/纸张的方向。

可能的值：“portrait” or “landscape”

例子：media=“all and (orientation: landscape)”

aspect-ratio 规定目标显示区域的宽度/高度比

可使用 “min-” 和 “max-” 前缀。

例子：media=“screen and (aspect-ratio:16/9)”

device-aspect-ratio 规定目标显示器/纸张的 device-width/device-height 比率

可使用 “min-” 和 “max-” 前缀。

例子：media=“screen and (device-aspect-ratio:16/9)”

color 规定目标显示器的 bits/color

可使用 “min-” 和 “max-” 前缀。

例子：media=“screen and (color:3)”

color-index 规定目标显示器可以处理的颜色数。

可使用 “min-” 和 “max-” 前缀。

例子：media=“screen and (min-color-index:256)”

monochrome 规定单色帧缓冲中的 bits/pixel。

可使用 “min-” 和 “max-” 前缀。

例子：media=“screen and (monochrome:2)”

resolution 规定目标显示器/纸张的像素密度 (dpi 或 dpcm)。

可使用 “min-” 和 “max-” 前缀。

例子：media=“print and (resolution:300dpi)”

scan 规定 tv 显示器的扫描方式。

可能的值：“progressive” 和 “interlace”。

例子：media=“tv and (scan:interlace)”

grid 规定输出设备是否是网格或位图。

可能的值：“1” 为网格，否则为 “0”。

例子：media=“handheld and (grid:1)”

CSS 多媒体查询，适配各种设备尺寸

响应式判断
"example">操作浏览器窗口，查看效果。

.example {
    padding: 20px;
    color: white;
}
/* 超小设备 (手机, 600px 以下屏幕设备) */
@media only screen and (max-width: 600px) {
    .example {background: red;}
}

/* 小设备 (平板电脑和大型手机，600 像素及以上) */
@media only screen and (min-width: 600px) {
    .example {background: green;}
}

/* 中型设备（平板电脑，768 像素及以上） */
@media only screen and (min-width: 768px) {
    .example {background: blue;}
} 

/* 大型设备（笔记本电脑/台式机，992 像素及以上） */
@media only screen and (min-width: 992px) {
    .example {background: orange;}
} 

/* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） */
@media only screen and (min-width: 1200px) {
    .example {background: pink;}
}