实现<main>与<nav>在不同屏幕尺寸下的布局一致性

问题分析 #

你当前的CSS主要存在以下问题：

• margin: auto 10% auto auto 导致整体布局无法居中，右侧固定10%边距不符合大屏靠边距扩展的需求
• 未针对小屏幕做适配，也没明确控制内容区的居中比例

解决方案代码 #

/* 主容器Grid布局 */
main {
  display: grid;
  /* 侧边导航固定宽度，内容区自适应剩余空间 */
  grid-template-columns: 15em minmax(0, 1fr);
  /* 大屏下最大宽度，确保内容不无限放大 */
  max-width: 95em;
  /* 自动外边距实现整体居中，导航因固定宽度自然略偏左 */
  margin: 0 auto;
  /* 小屏幕下占满整个视口宽度 */
  width: 100%;
}

/* 内容区容器，确保约90%宽度居中 */
main > .content {
  max-width: 90%;
  margin: 0 auto;
}

/* 粘性导航样式（按需添加） */
nav {
  position: sticky;
  top: 1rem;
}

关键细节说明 #

1. 响应式列布局：
   • grid-template-columns: 15em minmax(0, 1fr) 固定导航宽度为15em，内容区用minmax(0,1fr)确保小屏幕下占满剩余空间，大屏下随容器最大宽度限制自适应。
2. 大屏适配：
   • 设置max-width: 95em并配合margin: 0 auto，大屏下整个main容器居中且不超过设定宽度，两侧边距随屏幕尺寸自动扩展，满足“靠边距扩展”的需求。
3. 内容区居中控制：
   • 给内容区（比如main内的section或article）添加max-width: 90%和margin: 0 auto，确保内容始终保持约90%的宽度居中显示。
4. 小屏幕适配：
   • width: 100% 确保11寸小屏幕下main占满整个视口，导航和内容区自然填满屏幕空间。

如果需要针对极小屏幕（比如手机）优化成单列布局，可添加媒体查询：

@media (max-width: 768px) {
  main {
    grid-template-columns: 1fr;
  }
}

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