构建灵活响应的Web布局：利用Flexbox、Grid与相对单位优化元素定位

<div id="wrapper">
  <div id="buttons-container">
    <button class="responsive-button">按钮 1 - 详细内容</button>
    <button class="responsive-button">按钮 2 - 更多信息</button>
    <button class="responsive-button">按钮 3 - 最新动态</button>
    <button class="responsive-button">按钮 4 - 联系我们</button>
    <button class="responsive-button">按钮 5 - 关于我们</button>
    <button class="responsive-button">按钮 6 - 服务项目</button>
  </div>
  <div id="content-display">
    <p>点击上方按钮查看详细信息。</p>
  </div>
</div>

/* 全局设置box-sizing以简化布局计算 */
*, *::before, *::after {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  width: 90%; /* 使用百分比宽度，响应视口 */
  min-height: 100vh; /* 最小高度为视口高度，确保内容区域充足 */
  margin: 20px auto; /* 居中显示，上下20px外边距 */
  padding: 1.5em; /* 使用em作为内边距，随字体大小缩放 */
  display: flex; /* 启用Flexbox布局 */
  flex-direction: column; /* 子元素垂直排列 */
  gap: 1.5em; /* 子元素之间的间距 */
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

#buttons-container {
  width: 100%;
  padding: 1em;
  display: grid; /* 启用Grid布局 */
  /* 响应式列：自动填充，每列最小150px，最大1fr（占据可用空间） */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1em; /* 网格间距 */
  border: 1px solid #a4d8e4;
  border-radius: 5px;
  background-color: #eaf8fc;
}

.responsive-button {
  font-size: 1.1em; /* 使用em作为字体大小，随父元素字体缩放 */
  padding: 0.8em 1.2em;
  border: 1px solid #55C9EA;
  background-color: #EBF4F7;
  color: #3c96a4;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  white-space: nowrap; /* 防止按钮文本换行 */
  overflow: hidden; /* 隐藏溢出文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}

.responsive-button:hover {
  background-color: #d8edf3;
}

#content-display {
  padding: 1.5em;
  background-color: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  flex-grow: 1; /* 占据Flex容器中的剩余空间 */
}

#content-display p {
  font-size: 1em; /* 内容文本也使用em */
  line-height: 1.6;
  color: #333;
}

/* 媒体查询示例：在小屏幕上调整按钮字体大小和容器宽度 */
@media (max-width: 768px) {
  #wrapper {
    width: 9