CSS媒体查询用法详解

1. css 媒体查询

CSS 媒体查询是响应式设计的核心组成部分，它允许开发者根据用户的设备特性来调整网站的样式。

通过媒体查询，你可以定义一系列条件，当这些条件满足时，才会应用相应的 CSS 规则。这使得网站能够更好地适应不同类型的设备，包括但不限于桌面电脑、平板电脑、智能手机和其他手持设备。

1.1. 媒体查询的基本语法

媒体查询的基本语法包括 @media 关键词，后跟一个或多个条件，如果条件为真，则应用其中的 CSS 规则。一个典型的媒体查询看起来像这样：

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

在这个例子中，当屏幕宽度最大为 600 像素时，body 的背景色将变为浅蓝色。这里使用了 only 关键字来确保只有在匹配的情况下才会加载样式表，screen 表示这是为屏幕显示设计的样式。

1.2. 媒体查询的类型和条件

媒体查询可以包括一个或多个媒体类型和条件。常见的媒体类型包括：

• all：适用于所有设备。
• print：为打印样式表设计。
• screen：为显示器屏幕设计。
• speech：为屏幕阅读器设计。

常见的条件包括：

• width：视口的宽度。
• height：视口的高度。
• orientation：设备的方向，可以是 portrait（纵向）或 landscape（横向）。
• resolution：屏幕的分辨率。

例如，要为纵向设备定义样式，可以使用：

 @media screen and (orientation: portrait) {
   /* styles for portrait orientation */
 }

1.3. 复杂的媒体查询

你可以使用逻辑运算符来构建复杂的媒体查询，例如 and、not 和 only。and 运算符用来组合多个条件，当所有条件都为真时，媒体查询才有效。not 运算符用于反转条件的结果。only 运算符用来防止某些较老的浏览器忽略整个媒体查询块。

/* 应用于屏幕宽度大于 320px 并且小于 480px 的设备 */
@media only screen and (min-width: 320px) and (max-width: 480px) {
   /* styles for devices with a specific range of widths */
}

1.4. 结合使用媒体查询

媒体查询不仅可以用于 CSS 文件中，也可以用于 HTML 文档中，通过 <link> 标签来指定样式表的适用范围：

 <link rel="stylesheet" href="print.css" media="print">

这里指定了 print.css 文件仅在打印时使用。

此外，JavaScript API 如 Window.matchMedia() 也可以用来检测媒体查询的状态：

 var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
 
 if (mediaQuery.matches) {
   document.body.classList.add('dark-theme');
 }

以上代码检查是否用户偏好深色主题，并相应地应用深色主题类。

总之，媒体查询是一个强大的工具，它帮助我们创建更加灵活和适应性强的网页设计。通过合理利用媒体查询，我们可以确保我们的网站无论在何种设备上都能呈现出最佳的用户体验。

2. css 媒体查询 判断运算符

CSS 媒体查询中的判断运算符是用来帮助你更精确地控制何时应用某些样式规则。这些运算符包括 and、not 和 only。它们可以帮助你组合或者限制媒体查询的条件。下面是关于这些运算符的详细解释：

1. and 运算符：
• 用于将多个媒体特性组合起来形成一个单一的条件。
• 当所有列出的条件都为真时，整个媒体查询才为真。
• 示例：@media (min-width: 600px) and (max-width: 900px) 将只在屏幕宽度至少为 600px 但不超过 900px 时生效。
2. not 运算符：
• 用于否定媒体查询。
• 如果媒体查询没有 not 运算符，那么当查询条件为真时，样式就会被应用；加上 not 后，只有当查询条件为假时，样式才会被应用。
• 示例：@media not (min-width: 600px) 将在屏幕宽度小于 600px 时应用样式。
3. only 运算符：
• 用于指定媒体查询仅适用于特定的媒介类型。
• 它有助于防止一些旧浏览器在忽略媒体查询的同时也忽略了其中的 CSS 规则。
• 示例：@media only screen and (min-width: 600px) 可以确保这个查询仅对屏幕显示有效，同时也避免了旧浏览器应用其中的样式规则。

2.1. 组合使用

这些运算符可以一起使用来创建复杂的媒体查询。例如：

 /* 仅在屏幕显示且宽度在600px到900px之间时应用 */
 @media only screen and (min-width: 600px) and (max-width: 900px) {
   body {
       background-color: lightblue;  
   }
 }
 /* 除了屏幕宽度至少为600px的情况外均应用 */
 @media not (min-width: 600px) {
   body {
       background-color: lightgreen;
   }
 }

在上述示例中，第一个媒体查询会在屏幕宽度介于600px至900px之间时改变背景颜色为浅蓝色，但仅限于屏幕媒介。第二个媒体查询则在屏幕宽度小于600px时改变背景颜色为浅绿色。

2.2. 注意事项

• only 运算符通常用于提高性能和兼容性，尤其是在处理不支持媒体查询的老旧浏览器时。
• not 运算符可以用来排除特定条件，这对于需要为多种设备定制样式的情况非常有用。
• and 运算符使你能够定义更为具体的条件组合，这对于需要基于多个条件来改变布局的情况非常有用。

通过这些运算符，你可以编写出更为复杂和精确的媒体查询，以便更好地适应不同设备和环境的需求。