CSS3媒体查询如何适配不同设备

CSS3媒体查询（Media Queries）是一种让网页根据不同设备的特性（如屏幕尺寸、分辨率、设备类型等）来调整样式的技术。通过使用媒体查询，你可以为不同设备提供优化的布局和样式，从而提高用户体验。

以下是一些常见的媒体查询示例，用于适配不同设备：

1. 适配手机和平板设备：

/* 默认样式 */
body {
  font-size: 16px;
}

/* 针对宽度小于等于768px的设备（如手机和平板） */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

2. 适配桌面设备：

/* 默认样式 */
body {
  font-size: 16px;
}

/* 针对宽度大于768px的设备（如桌面电脑） */
@media screen and (min-width: 769px) {
  body {
    font-size: 18px;
  }
}

3. 适配不同分辨率的设备：

/* 默认样式 */
body {
  font-size: 16px;
}

/* 针对分辨率为视网膜屏（Retina）的设备 */
@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    font-size: 20px;
  }
}

4. 适配特定设备类型：

/* 默认样式 */
body {
  font-size: 16px;
}

/* 针对手持设备（如手机） */
@media only screen and (max-device-width: 480px) {
  body {
    font-size: 14px;
  }
}

/* 针对平板设备 */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) {
  body {
    font-size: 16px;
  }
}

/* 针对桌面设备 */
@media only screen and (min-device-width: 1025px) {
  body {
    font-size: 18px;
  }
}

通过合理地使用媒体查询，你可以确保你的网站在不同设备上都能呈现出良好的布局和样式。在实际项目中，你可能需要根据具体需求调整媒体查询的条件和样式。