如何让嵌套Div内的H2标签实现响应式，避免超出容器范围？

问题根源 #

你的代码存在几个核心问题导致H2超出容器：

1. JS中home-first类名拼写错误（缺少闭合引号），导致关联样式无法生效
2. H2使用固定值margin-left:700px，窗口缩小时固定偏移量会直接让元素超出容器范围
3. transform: translate(-50%, -50%)配合固定margin，进一步加剧了元素的偏移错误
4. 字体大小固定为100px，小屏幕下无法自适应容器宽度

修正方案 #

1. 修复JS类名拼写错误

将className='home-first改为className='home-first'，确保样式能正确绑定到元素。

2. 重构CSS实现响应式布局

替换原有定位和字体设置，用flex实现内部元素自适应，同时设置响应式字体：

.home-page {
    display: flex;
    flex-direction: column;
    flex: 0.65;
    max-width: 100%;
    width: 100%;
    background-color: #00ACFE;
}

.home-header {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background-color: rgb(200, 244, 244);
    max-width: 90%;
    margin-left: 65px;
    margin-top: 0;
    height: 700px;
    width: 100%;
    overflow: hidden; /* 防止内部元素溢出容器 */
}

.home-first {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    flex: 1; /* 占满home-header的高度 */
}

h2 {
    /* 响应式字体：最小40px，最大100px，随视窗宽度自适应 */
    font-size: clamp(40px, 15vw, 100px);
    margin: 0;
    transform: none; /* 移除错误偏移 */
}

@media screen and (max-width: 800px) {
    .home-header {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}

3. 修改后的Home.js代码

function Home() {
  return (
    <div className="home-page">
      <div className="home-header">
        <div className='home-first'>
          <h2>BAROO</h2>
        </div>
      </div>
    </div>
  )
}

export default Home

关键修改说明 #

• 类名修复：确保样式正常生效
• Flex居中布局：替代固定margin，让H2始终在容器内部居中，不会超出边界
• 响应式字体：clamp()函数让字体在设定范围内随视窗宽度自适应，避免小屏幕溢出
• 移除错误定位：删除固定偏移量和transform，消除硬编码带来的适配问题

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