5154

一、基本

媒体查询（Media Query）是 CSS 中用于针对不同设备特性（如屏幕尺寸、分辨率等）应用不同样式的一种技术，它通过判断设备的特定属性，为不同的设备或场景提供定制化的视觉呈现。

二、语法结构

媒体查询的语法由三部分组成：

可选的媒体类型：表示媒体类型，常见的有 all（适用于所有设备）、screen（适用于屏幕设备）、print（适用于打印设备）等。

媒体特性表达式：用于限制样式表范围的表达式，常见的媒体特性包括宽度（width）、高度（height）、颜色（color）、分辨率（resolution）等。

样式规则：在花括号内定义的 CSS 规则，当媒体查询条件满足时，这些样式将被应用到目标元素上。

三、常见媒体类型及特性

四、逻辑运算符

and：用于组合多个条件，所有条件都满足时才会应用样式。

not：取反，应用在不符合某个条件的设备上。

,（逗号）：相当于 “或” 操作，任意一个条件满足时应用样式。

五、实际应用示例

以下是一些常见的媒体查询应用场景及代码示例：

基本的宽度媒体查询：根据屏幕宽度应用不同样式，实现响应式布局。

当屏幕宽度小于等于 600px 时，背景颜色变为浅蓝色：

     @media screen and (maxwidth: 600px) {
       body {
         backgroundcolor: lightblue;
       }
     }

当屏幕宽度大于 600px 时，背景颜色变为浅绿色：

     @media screen and (minwidth: 601px) {
       body {
         backgroundcolor: lightgreen;
       }
     }

响应式布局中的断点：针对不同设备屏幕宽度调整布局。

手机端：

     @media screen and (maxwidth: 480px) {
       body {
         fontsize: 14px;
       }
     }

平板设备：

     @media screen and (minwidth: 481px) and (maxwidth: 768px) {
       body {
         fontsize: 16px;
       }
     }

桌面设备：

     @media screen and (minwidth: 769px) {
       body {
         fontsize: 18px;
       }
     }

针对屏幕方向的媒体查询：判断设备是横屏还是竖屏并应用相应样式。

横屏模式时，背景颜色变为橙色：

     @media screen and (orientation: landscape) {
       body {
         backgroundcolor: orange;
       }
     }

竖屏模式时，背景颜色变为黄色：

     @media screen and (orientation: portrait) {
       body {
         backgroundcolor: yellow;
       }
     }

针对高分辨率屏幕的媒体查询：检测设备的像素密度并应用样式。

针对高分辨率屏幕，图片宽度变为 50%：

     @media screen and (minresolution: 2dppx) {
       img {
         width: 50%;
       }
     }

或者使用devicepixelratio：

     @media screen and (webkitmindevicepixelratio: 2), screen and (mindevicepixelratio: 2) {
       img {
         width: 50%;
       }
     }

六、在 link 标签中的应用

可以通过在link 标签中使用媒体查询的条件来有条件地加载不同的样式表，例如指定一个样式表只在宽度小于等于 800px 的设备上生效：

<link rel="stylesheet" media="(maxwidth: 800px)" href="example.css">

七、注意事项

在使用媒体查询时，需要注意以下事项：

条件排序：当使用minwidth 和maxwidth 作为判断条件时，应确保条件范围从小到大或从大到小排序，以避免样式覆盖问题。

样式冲突：确保媒体查询中的样式不被后面的 CSS 规则所覆盖，建议将媒体查询的样式写在后面。

meta 标签：设置<meta name="viewport" content="width=devicewidth, initialscale=1.0"> 以确保移动设备能正确渲染页面。

语法错误：确保媒体查询的语法正确，特别是逻辑运算符后的空格和括号内不要写结束符 “;”。