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

原创已于 2023-06-09 11:06:48 修改 · 2.9k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #javascript #前端

于 2023-04-12 14:19:42 首次发布

前端专栏收录该内容

27 篇文章

订阅专栏

文章介绍了如何使用CSS3的@media查询来创建响应式设计，适应不同设备尺寸。通过示例展示了如何调整元素尺寸，以适应1440x900的屏幕，并列举了@media查询的各种用法，包括width、height、device-width等条件，以及针对不同设备类型的规则设定。

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