Meida-Query 媒体查询_css meida-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_62201781/article/details/145902827

媒体查询是 CSS3 的一个新的技术，它使我们可以针对不同的设备（或者说，不同的屏幕尺寸和分辨率）来应用不同的样式。

媒体类型

CSS中的媒体查询主要有以下媒体类型：

all: 适用于所有设备。
print: 主要用于打印机和打印预览模式。
screen: 主要用于电脑屏幕、平板、智能手机等。
speech: 适用于基于语音识别的设备。

@media print {
	body { font-size: 10pt; }
}

@media screen {
	body { font-size: 13px; }
}

@media screen, print {
	body { line-height: 1.2; }
}

第一组是适用于打印机或打印预览模式的，其所定义的样式将在打印界面中生效。
第二组是适用于电脑屏幕和智能手机等设备的，其所定义的样式将在这些设备的显示界面中生效。
第三组同时适用于屏幕和打印界面，其所定义的样式在两种界面都会生效。

媒体特性

width and height：这两个特性主要用于描述设备显示区域的宽度和高度，可以用来调整不同设备下的网页布局。

@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

以上CSS规则表示，当设备的屏幕宽度小于或等于600px时，网页背景颜色变为浅蓝色。

orientation：描述设备的方向，值可以是portrait（竖屏）或landscape（横屏）。

@media screen and (orientation: portrait) {
    body {
        font-size: 1.2em;
    }
}

以上CSS规则表示，当设备处于竖屏状态时，网页字体变为1.2em。

device-width and device-height：这两个特性用于描述设备的物理尺寸

@media screen and (min-device-width: 1200px) {
    body {
        margin: 0 auto;
        width: 1200px;
    }
}

以上CSS规则表示，若设备的物理屏幕宽度大于或等于1200px，网页主体将居中显示，并且宽度恒定为1200px。

resolution：描述设备的分辨率。

@media print and (min-resolution: 300dpi) {
    body {
        font-size: 12pt;
    }
}

以上CSS规则表示，如果设备的打印分辨率至少为300 dot per inch，网页字体变为12pt。

aspect-ratio and device-aspect-ratio：前者描述的是显示区域的宽高比，后者描述设备物理屏幕的宽高比。

@media screen and (aspect-ratio: 16/9) {
    body {
        background: url('widescreen-bg.jpg');
    }
}

逻辑操作符

and：使用 and 操作符可以同时匹配多个条件。

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* 这里是一些规则 */
}

上面的代码表示只有在屏幕宽度在 768px 和 1024px 之间时才会应用这些规则。

or：使用 or 操作符可以匹配其中一个条件。

@media (color) or (color-index) {
  /* 这里是一些规则 */
}

上面的代码表示只要设备支持颜色或颜色索引，就会应用这些规则。

not：使用 not 操作符可以排除某个条件。

@media not screen {
  /* 这里是一些规则 */
}

上面的代码表示只有在非屏幕设备上才会应用这些规则。

only：使用only操作符，可以隐藏样式表不会被旧的浏览器应用。这是因为老的浏览器不支持媒体查询，它们会忽略only关键字和后面的所有表达，而新的浏览器会把它作为普通的媒体查询来处理。

@media only screen and (min-width: 600px) {
  .sidebar {
    display: block;
  }
}

在这个例子中，只有设备类型为屏幕并且视口的最小宽度为600px时，侧边栏才显示，并且这个样式只会被支持媒体查询的浏览器应用。

link方式引入

<link rel="stylesheet" media="(max-width: 768px)" href="example.css">

上述代码的作用是在浏览器视口宽度小于或等于768px时，应用example.css样式表。

编写位置及顺序

媒体查询通常放在 CSS 文件的底部，或在每个 CSS 规则集后面，具体取决于逻辑和项目结构。重要的是，它们应该放在相关规则集的附近，使其易于寻找并理解上下文。

媒体查询的顺序也很重要。通常，你应该先进行一般的样式设置，然后再按照屏幕或设备的大小从小到大进行媒体查询的设置。这是由于 CSS 的层叠规则，后写的样式会覆盖先写的样式。所以当你在屏幕尺寸变大时，需要更改的样式应该在后面。

/* 通用样式 */
body {
  background-color: white;
  color: black;
}

/* 小设备（小于600px） */
@media only screen and (max-width: 600px) {
  body {
    background-color: blue;
  }
}

/* 中等设备（601px至768px） */
@media only screen and (min-width: 601px) and (max-width: 768px) {
  body {
    background-color: green;
  }
}

/* 大设备（769px及以上） */
@media only screen and (min-width: 769px) {
  body {
    background-color: red;
  }
}