如何修复网站视图不超过 1440 像素答案

【问题标题】：How to fix the website view not above 1440px如何修复网站视图不超过 1440 像素
【发布时间】：2021-02-10 18:31:44
【问题描述】：

我目前的网站是https://resillience.in 它在 1440 像素以下完全响应并且工作正常

但它看起来很奇怪在 2560 像素下查看如下所示

也不想更改 % 中的内容以使其在 2560 像素时响应

如何将视图固定为 1440 像素并进行如下所示的解决方法如果在较高处查看，它会从两侧添加填充。

在主html css文件中添加max-width:1440px，我无法达到预期的结果

以下代码也可能无法解决

#root {
  max-width: 1400px;
  margin: 0 auto;
}

因为某些图像的 css 属性为

position: fixed;
right: 0;

【问题讨论】：

我刚刚更正了，我的意思是宽度！
请不要说过于模糊的东西，例如 “Also max-width:1440px was not working” - 解释一下，或者更好的是，以代码的形式显示你在哪里尝试应用它。

标签： javascript html css reactjs

【解决方案1】：

一般来说，您可以将此 CSS 应用于您的 #root 元素：

#root {
  max-width: 1400px;
  margin: 0 auto;
}

这会将整体宽度限制在 1400 像素，并在窗口宽度超过 1400 像素时将其水平居中。

我不知道您网站的其他页面中是否有任何细节会导致与这些设置相关的问题（我乍一看没有看到任何问题），但这将是一个简单、通用的过程得到你想要的。

【讨论】：

谢谢，但这也行不通，因为有些图像的 css 属性设置为 position: absolute;右：0；
如果该绝对位置与窗口相关，则将position: relative添加到#root，使其成为具有相对位置的下一个更高的祖先，并且绝对位置将相对于#root。正如我所写的，还有其他细节需要修复，但您必须自己调整 - 期望一个简单的四行解决方案是不现实的，但这是一般的方法。

【解决方案2】：

将justify-content: flex-end; 添加到右侧菜单中，我已经更改了一些CSS 看起来很漂亮。请通过这个。

.jss6 {
  justify-content: flex-end;
}

.jss7, .jss18 {
  margin: 0 10px; /* to add space between a tag and dropdown */
}
 
.active {
  border: none;
}

.active::before {
  position: absolute;
  height: 6px;
  width: 100%;
  background: #3672c0;
  content: '';
  left: 0;
  bottom: -3px;
}

【讨论】：

【解决方案3】：

尝试执行以下操作：

#root {
  width: 100%;
}

@media (min-width: 1440px) {
  #root {
    width: 1440px;
    margin: 0 auto; // for centering
  }
}

根据我的快速回顾，将宽度设置为固定大小可能会解决问题，为什么？因为你可能在根 div 中使用了 width: 100%，所以将根 div 设置为固定大小总是与 100% = 1440px 相关； :) 告诉我

【讨论】：