媒体查询

媒体查询（Media Queries）是CSS3中的一种技术，它允许根据不同的设备特性（如屏幕大小、分辨率、屏幕方向等）来应用不同的CSS样式和布局。媒体查询可以在CSS样式表中定义条件，以响应不同的设备以及浏览器窗口大小的变化。

媒体查询的基本语法如下：

@media mediatype and (media feature) {
  /* CSS样式规则 */
}

• mediatype：指定用于应用媒体查询的设备类型，常见的有all、screen、print、speech等。
• media feature：指定用于匹配设备特性的条件，常见的特性有width、height、orientation、resolution等。

下面是一些常用的媒体查询条件及对应的描述：

• width：指设备的宽度。
• min-width：指设备的最小可视宽度。
• max-width：指设备的最大可视宽度。
• height：指设备的高度。
• min-height：指设备的最小可视高度。
• max-height：指设备的最大可视高度。
• orientation：指设备的方向，可以是portrait（纵向）或landscape（横向）。
• aspect-ratio：指设备的宽高比。
• resolution：指设备的屏幕分辨率。

下面是一个媒体查询的例子：

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

上面的示例中，当设备的屏幕宽度小于等于768px时，将会应用body元素的背景颜色为浅蓝色。

一些注意点：

• 媒体查询可以放在CSS样式表的任何位置，但最好将其放置在样式表的末尾，以免冲突或被其他样式所覆盖。
• 媒体查询可以嵌套，以适应更复杂的条件。
• 媒体查询可以根据需要应用不同的样式表，也可以在同一个样式表中定义多个媒体查询。
• 在编写媒体查询时，应注意使用适当的媒体特性和条件，以确保样式在不同设备上的兼容性和一致性。

移动端->pc端的适配规则：min-width从小到大

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
}
 
// 注意 700 和 1000 上下的顺序问题
@media (min-width:700px) {
    .box {
        background: green;
    }
}
 
@media (min-width:1000px) {
    .box {
        background: red;
    }
}

pc端->移动端的适配规则：max-width从大到小

@media (max-width: 1000px) {
    .box {
        background: green;
    }
}
 
@media (max-width: 700px) {
    .box {
        background: red;
    }
}