CSS 媒体查询 PC 和 Mobile

CSS 媒体查询是一种用于调整 CSS 样式表的技术，通过检测浏览器的视口尺寸、分辨率或屏幕方向等属性，以便动态地修改 CSS 样式表中的样式。这种技术可以用来优化网页在不同设备类型和屏幕尺寸上的显示效果。

用法

在 CSS 中，媒体查询以 @media 关键字开头，后面跟着一个条件列表。例如：

@media screen and (max-width: 768px) {
  /* 在屏幕宽度小于 768px 时应用这些 CSS 样式 */
  ...
}

条件列表由一个或多个媒体属性和对应的值组成，它们可以用逻辑运算符 and、or 和 not 来组合。下表列出了常用的媒体属性和值。

| 媒体属性 | 说明 | | -------- | ---------------------------------------------- | | width | 视口的宽度 | | height | 视口的高度 | | aspect-ratio | 视口的宽高比 | | device-width | 设备宽度 | | device-height | 设备高度 | | orientation | 屏幕方向（横向或纵向） | | resolution | 屏幕分辨率 | | color | 设备色彩深度 | | monochrome | 设备黑白深度 | | scan | 扫描方式（逐行或隔行） | | grid | 是否使用网格布局 |

PC

对于 PC 来说，主要是针对不同的屏幕尺寸进行样式的修改。以下是适用于 PC 的媒体查询：

/* 当屏幕宽度小于或等于 768px 时，应用以下 CSS 样式 */
@media screen and (max-width: 768px) {
  ...
}

/* 当屏幕宽度大于或等于 768px 且小于或等于 992px 时，应用以下 CSS 样式 */
@media screen and (min-width: 768px) and (max-width: 992px) {
  ...
}

/* 当屏幕宽度大于或等于 992px 且小于或等于 1200px 时，应用以下 CSS 样式 */
@media screen and (min-width: 992px) and (max-width: 1200px) {
  ...
}

/* 当屏幕宽度大于 1200px 时，应用以下 CSS 样式 */
@media screen and (min-width: 1200px) {
  ...
}

Mobile

对于 Mobile 设备来说，主要是针对移动设备尺寸、像素密度和方向等特性进行样式的修改。以下是适用于移动设备的媒体查询：

/* 移动设备（包括 iPhone 和 Android 手机）的通用样式 */
@media screen and (max-device-width: 480px) {
  ...
}

/* iPhone4 和 iPhone4S */
@media screen and (device-aspect-ratio: 2/3) {
  ...
}

/* iPad 和 iPad mini 横屏 */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  ...
}

/* 高清屏幕 */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (   min--moz-device-pixel-ratio: 2),
        only screen and (     -o-min-device-pixel-ratio: 2/1),
        only screen and (        min-device-pixel-ratio: 2),
        only screen and (                min-resolution: 192dppx) {
  ...
}

总结

CSS 媒体查询是一种非常重要的 CSS 技术。通过使用媒体查询，开发者能够根据不同用户设备的特征自动适配页面样式，使得网页在不同设备上的显示效果更为美观、一致，提升用户体验。在开发响应式网站时，媒体查询是必不可少的一环，掌握它的使用可以帮助程序员写出更加优秀的 Web 应用。