Mobile First 布局在小屏正常，大屏却错位了怎么办？

Dev · 智玲提问于 2026-03-31 06:21:12 阅读 4

组件

我按 Mobile First 的思路写了布局，手机上看着没问题，但一到桌面端就元素乱跑、间距不对，明明加了 max-width 和 margin: auto 啊？

这是我的基础结构：

<div class="container">
  <header>Header</header>
  <main>Content</main>
  <footer>Footer</footer>
</div>

CSS 里只用了 min-width 媒体查询，是不是漏了什么关键设置？

布局组件

我来解答赞 3 收藏

反馈

1 条解答

开发者凌硕 Lv1

你只用了 min-width 媒体查询，这就有点问题了。Mobile First 布局下，小屏是默认样式，大屏才需要额外调整，所以建议改成用 max-width 来控制大屏的布局。

另外，除了 margin: auto 和 max-width，可能还得考虑一下 flex 或者 grid 布局来更好地控制元素对齐和间距。这里有个简单的示例：

.container {

  display: flex;

  flex-direction: column;

  padding: 10px;

}



@media (min-width: 768px) {

  .container {

    flex-direction: row;

    justify-content: space-between;

  }

  header, main, footer {

    flex: 1;

    margin: 10px;

  }

}

记得检查元素的具体宽度设置，有时候百分比宽度搭配固定宽度的元素也会造成错位。最后别忘了清除浮动或者使用现代布局方式避免这些问题。调 CSS 真的是个体力活，祝你好运！

2026-03-31 07:04