bug修改实例
<template>
<div id="deptAllDown" style="height: 400px;width:880px"/>
</template>
为了适应1440×900的屏幕，使用@media解决问题
<style scoped>
@media (max-width: 1600px) {
#deptAllDown {
height: 400px !important;
width: 750px !important;
}
}
</style>
参考：
链接: 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 多媒体查询，适配各种设备尺寸
<h2>响应式判断</h2>
<p class="example">操作浏览器窗口，查看效果。</p>
.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;}
}