所有设备的 CSS3 媒体查询

CSS3 媒体查询可以根据不同的设备宽度、高度、方向、分辨率等属性来控制元素的样式和布局。在响应式设计中，它是必不可少的一部分。

媒体查询语法

媒体查询使用 @media 规则来定义，媒体查询包含了要应用的 CSS 规则。它的基本语法如下所示：

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

其中，mediatype 表示媒体类型，如 all、screen、print 等，media feature 表示媒体特性，用于描述设备的某些特征，如设备宽度 width、设备高度 height、屏幕方向 orientation、分辨率 resolution 等。

常用媒体查询

设备宽度和高度

/* 设备宽度小于等于 768px */
@media (max-width: 768px) {
  /* CSS 规则 */
}

/* 设备宽度大于等于 768px */
@media (min-width: 768px) {
  /* CSS 规则 */
}

/* 设备高度小于等于 768px */
@media (max-height: 768px) {
  /* CSS 规则 */
}

/* 设备高度大于等于 768px */
@media (min-height: 768px) {
  /* CSS 规则 */
}

屏幕方向

/* 屏幕为纵向 */
@media (orientation: portrait) {
  /* CSS 规则 */
}

/* 屏幕为横向 */
@media (orientation: landscape) {
  /* CSS 规则 */
}

视口宽度和高度

/* 视口宽度小于等于 768px */
@media (max-device-width: 768px) {
  /* CSS 规则 */
}

/* 视口宽度大于等于 768px */
@media (min-device-width: 768px) {
  /* CSS 规则 */
}

/* 视口高度小于等于 768px */
@media (max-device-height: 768px) {
  /* CSS 规则 */
}

/* 视口高度大于等于 768px */
@media (min-device-height: 768px) {
  /* CSS 规则 */
}

分辨率

/* 分辨率小于等于 72dpi */
@media (max-resolution: 72dpi) {
  /* CSS 规则 */
}

/* 分辨率大于等于 72dpi */
@media (min-resolution: 72dpi) {
  /* CSS 规则 */
}

使用媒体查询的注意事项

1. 媒体查询必须放在要控制的 CSS 规则之前。
2. 媒体查询可以嵌套，但需要注意嵌套的顺序。
3. 媒体查询中可以使用逗号分隔多个条件，表示或的关系。
4. 媒体查询仅在浏览器支持的情况下才会生效，因此需要考虑浏览器兼容性问题。

结语

以上是常用的一些媒体查询，它们可以让我们方便地控制网页在不同设备上的布局和样式。但是，媒体查询只是响应式设计中的一部分，还需要考虑很多其他的因素，如弹性布局、字体大小、图片适配等。