媒体查询适配手机和平板

媒体查询是一种在前端开发中用于适配不同设备的技术。它允许你根据设备的屏幕尺寸和其他特征来应用不同的样式。对于手机和平板的适配，你可以使用媒体查询来设置不同的 CSS 规则。

下面是一个简单的示例，展示了如何使用媒体查询适配手机和平板：

/* 适配手机 */
@media only screen and (max-width: 600px) {
  /* 手机设备的样式 */
}

/* 适配平板 */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
  /* 平板设备的样式 */
}

/* 默认样式 */
/* 在没有匹配到上述媒体查询时，应用默认样式 */

在上述示例中，我们使用 `@media` 关键字开头定义了媒体查询。`only screen` 表示只针对屏幕设备，而 `max-width` 和 `min-width` 分别表示屏幕宽度的最大和最小值。

在具体的媒体查询中，你可以根据实际需求设置不同的样式规则，以适配不同的设备。这样，当用户在手机或平板上访问你的网页时，会根据设备尺寸自动应用相应的样式规则。

当然，以上只是一个简单的示例，实际的适配可能需要更多的媒体查询和样式规则。你可以根据具体情况进行调整和扩展。希望这个回答能对你有所帮助！如果还有其他问题，请随时提问。