知道电脑分辨率如何用媒体查询做适配请举例

媒体查询是一种CSS技术，可以根据设备的特性（如屏幕分辨率、屏幕尺寸、设备方向等）调整页面的样式和布局。以下是一个根据屏幕分辨率进行适配的媒体查询示例：

/* 当设备宽度小于等于 768 像素时，应用以下样式 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .header {
    height: 50px;
  }
  /* ...其他样式 */
}

/* 当设备宽度大于 768 像素时，应用以下样式 */
@media (min-width: 769px) {
  body {
    font-size: 16px;
  }
  .header {
    height: 80px;
  }
  /* ...其他样式 */
}

在上面的示例中，我们使用了两个媒体查询，一个是针对设备宽度小于等于 768 像素的情况，另一个是针对设备宽度大于 768 像素的情况。在这两个媒体查询中，我们可以根据具体的需求调整页面的字体大小、元素尺寸、布局等等。

例如，在第一个媒体查询中，我们将字体大小设置为 14px，头部高度设置为 50px。这样在小屏幕设备上，页面的内容会自适应缩小，并且头部也会相应地缩小，以适应小屏幕的显示。在第二个媒体查询中，我们将字体大小设置为 16px，头部高度设置为 80px。这样在大屏幕设备上，页面的内容会自适应放大，并且头部也会相应地放大，以适应大屏幕的显示。

这样，我们就可以使用媒体查询根据设备的分辨率来做适配了