Html 使网站适合屏幕大小

所以我一直在一个网站上工作。现在我正在努力使它适合所有的屏幕大小，我有一个问题。以下是一个例子：

@media only screen and (min-width : 1366px) {
    #wrapper {
        width: 1400px;
        height: 750px;
        position: absolute;
    }
}

现在，如果屏幕大小至少为1366，则上面的屏幕大小将显示为1400像素。然而，如果屏幕大小是1400像素，而你的屏幕恰好是1366像素，你将不得不左右滚动。这是我的问题，但我有一个如何解决这个问题的想法。我想把中间的1366个像素点放在中间，然后如果屏幕的尺寸更大，剩下的像素将被等分在两边。例如：

我的屏幕大小是1500像素。最小屏幕尺寸为1200像素。然后 将向1200像素内容（感测）的每一侧添加150像素 剩下300个像素）

现在在没有内容的一侧（因为像素更大），我希望有一个背景色。那么，我该如何实现这一点呢？如果这没有意义，请发表评论，我会尽量让这更清楚。谢谢：）

编辑：

---

人们在问，为什么你不能只做宽度：100%。这是行不通的，因为如果缩小屏幕尺寸，会把一切都搞砸。

欢迎使用。你说得对，你的问题对于你要问的问题来说太复杂了。你本质上要问的是“如何将一个div居中”

#wrapper {
   margin: 0 auto;
}

对于背景，您可以执行以下操作：

body {
   background-color:#000;
}

为您的第一期编辑：

#wrapper{overflow:hidden}

以删除滚动条，尽管这实际上只适用于图像，否则您可以选择100%的宽度。根据您的设计，您可能会从阅读响应性框架中获益。

尝试以下方法：

CSS

@media only screen and (min-width : 1366px) {
     #wrapper {
          width: 100%;
          height: 750px;
          position: absolute;
     }
}

---

我不知道你要什么。我想是这样的：

@media only screen and (min-width : 1366px) {
    #wrapper {
        width: 1400px;
        height: 750px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

---

我想@SajadLfc回答了你的问题，但仍然不确定，因为他获得了否决票：/

以获得屏幕宽度和高度

用这个,

width = screen.width;
height = screen.height;

及

---

希望这有帮助。

您好，您的回答很有帮助。但我仍然有一个问题：）如果你的像素数量大于内容数量，我如何将内容集中在你的屏幕上？@user3448743试试我的方法answer@user3448743根据我的编辑，你可能没有看到，我没有看到你的第一期。如果您使用的是背景色，那么在宽度上使用100%比固定的像素宽度要好。为什么不能使用

宽度：100%

？您是否尝试过

屏幕。宽度

和

屏幕。高度

。注意：不需要

边距：0 auto

，因为容器的宽度是

100%

）你好，你的不行。这就是我最初尝试的，但是如果使用100%，当宽度变小时，它会弄乱东西。@user3448743在媒体查询中给出

width:100%

。这在你的情况下肯定会起作用。@user3448743:亲爱的，你是在媒体查询外部还是内部进行了尝试？？

width = window.innerwidth;
height = window.innerheight;