React 页面宽度优化

Question

我正在尝试用 React 制作一个网站。我尝试了纯 css，然后决定使用 react-bootstrap。这两种方式都没有解决我的问题。我的页面右侧有溢出，如果我使用 overflow-x:hidden，我的页面在移动视觉上会减半。所以它根本没有响应（我在所有页面上使用 bootstrap 容器以使其响应）。

Overflowing Pic

Mobile Vision

Main Page and css :

   <Container fluid className="main-wrapper">
      <Row className='HeaderText'>
              /OPEN METAVERSE  
      </Row>
    </Container>
  )
}

CSS

@font-face{
    font-family:Adam;
    src:url("../fonts/Adam-Medium.ttf");
}

.main-wrapper{
    background-image:url("../pictures/MainPagePicTemp.png");
    background-repeat: no-repeat;
    background-size: cover;
    display:flex;
    height:920px;
}

.HeaderText{
    color:red;
    font-family:Adam;
    font-weight: Medium;
    font-size:96px;
    margin-left:35px;
    margin-top:60px;
}

Answer 1

根据随附的手机屏幕截图，溢出的原因是文字大小。不过桌面图像不清晰。

建议

尝试使用钳位选择器生成跨设备的自适应字体大小。请参阅 Reference 和下面的示例
```
.HeaderText {
 font-size:clamp(2rem, 10vw - 2rem, 96px)
 }
```

您可以使用 word-break 选择器使文本溢出到下一行。 See Reference

React 页面宽度优化

React page width optimization

css

reactjs

overflow

react-bootstrap