CSS媒体查询：修改600px页面尺寸该用max还是min宽高？

核心逻辑很明确：选哪个取决于你要在什么视口尺寸范围下触发600px相关的布局调整，以下分两种常见场景说明：

场景1：适配小屏幕（视口≤600px时应用样式） #

用max-width: 600px（若对高度有严格要求可搭配max-height: 600px），当设备视口宽/高不超过600px时，触发媒体查询内的样式。

比如要保证小屏幕下布局不会过度拥挤，限制容器最大尺寸为600px：

@media (max-width: 600px) {
  .page-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 16px;
  }
}

这是响应式开发的常规操作，针对移动端等小屏设备调整布局，避免内容溢出或排版错乱。

场景2：适配大屏幕（视口≥600px时应用样式） #

用min-width: 600px（按需搭配min-height: 600px），当设备视口宽/高至少达到600px时，应用固定的600px布局样式。

比如屏幕足够大时，把布局固定在600px宽度，防止过度拉伸导致布局变形：

@media (min-width: 600px) {
  .page-container {
    width: 600px;
    margin: 0 auto;
  }
}

这种用法适合以600px为基础尺寸的桌面端布局，确保屏幕超过600px后布局不会随意变宽。

额外提醒 #

• 如果只是想固定布局宽高为600px，不需要媒体查询，直接给元素设置width: 600px; height: 600px;即可——媒体查询是用来做不同屏幕尺寸的适配切换，不是固定尺寸的必要手段。
• 实际开发中很少用max-height/min-height做媒体查询，因为页面高度通常随内容动态变化，除非是弹窗、全屏组件这类对高度有严格限制的场景。
• 可以单独使用宽度媒体查询，不用强制加高度条件，除非你的布局逻辑确实依赖视口高度。

内容的提问来源于stack exchange，提问作者Aria369