CSS Responsive 对我的网站来说很奇怪，宽度自动

【问题标题】：CSS Responsive is weird for my website, width autoCSS Responsive 对我的网站来说很奇怪，宽度自动
【发布时间】：2021-09-03 03:51:37
【问题描述】：

我用 ReactJS 和 SASS 做了一个网站。一切都很顺利，直到我试图让它响应。在较小的设备上宽度很奇怪。

这是网站：https://uidea3.netlify.app/

帮帮我！谢谢！

【问题讨论】：

标签： css reactjs sass responsive

【解决方案1】：

您的.header 类的固定宽度为1024px。删除它，网站不会溢出。如果您需要使其响应，那么您可以像这样添加媒体查询。您需要为您的用例找出正确的断点，您可以参考bootstrap breakpoints

@media only screen and (min-width: 1023px) {
  .header {
     width: 1024px;
     ...rest of properties
   }
}

@media only screen and (max-width: 1023px) {
  .header {
     width: 100%;
     ...rest of properties
   }
}

【讨论】：

【解决方案2】：

探索react-media npm 中可用的包。它将根据您配置的设备大小呈现组件或元素。

【讨论】：