如何在媒体查询中组合两个屏幕尺寸 CSS

在现今的多设备时代，为了让网站在不同屏幕尺寸下正常显示，需要使用响应式设计。而媒体查询是响应式设计的核心部分，允许我们根据不同的屏幕尺寸应用不同的 CSS 样式。

但是，有时候我们需要组合多个屏幕尺寸，比如同时考虑手机和平板电脑的屏幕尺寸，这时我们该如何在媒体查询中组合这两个屏幕尺寸呢？

使用逗号分隔不同尺寸

最简单的方法是使用逗号将不同的屏幕尺寸分隔开来。例如，我们要在手机和平板电脑下使用一些特定的样式，就可以这样写：

@media only screen and (max-width: 767px), (min-width: 768px) and (max-width: 1023px) {
  /* 手机和平板电脑下的样式 */
}

上面的代码中，我们使用了两个逗号将手机和平板电脑的屏幕尺寸分隔开来。其中，(max-width: 767px) 表示屏幕宽度小于等于 767 像素的手机设备，(min-width: 768px) and (max-width: 1023px) 表示屏幕宽度大于等于 768 像素、小于等于 1023 像素的平板电脑设备。

使用 and 连接不同尺寸

除了使用逗号分隔不同尺寸外，我们也可以使用 and 关键字将不同的屏幕尺寸连接起来。例如，我们要在手机和平板电脑的横屏模式下使用一些特定的样式，可以这样写：

@media only screen and (max-width: 767px) and (orientation: landscape),
       only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  /* 手机和平板电脑横屏模式下的样式 */
}

上面的代码中，我们使用了 and 关键字连接了两个不同的屏幕尺寸，同时又加入了 orientation: landscape 来指定横屏模式。

总之，无论是使用逗号还是 and，都可以在媒体查询中组合不同的屏幕尺寸，以达到更加精细的响应式设计效果。

注意：以上代码片段为 Markdown 格式。