使网站适合屏幕尺寸

Question

所以我一直在一个网站上工作。 现在，我正在努力使其适合所有屏幕尺寸，但是我遇到了问题。 这是一个例子：

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

现在，如果屏幕大小至少为1366，则上面的命令将屏幕大小显示为1400像素。但是，如果屏幕大小为1400像素，并且屏幕恰好是1366像素，则您将不得不左右滚动。 那是我的问题，但是我对如何解决这个问题有一个想法。 我想将1366像素的内容居中居中，然后，如果屏幕尺寸更大，则剩余的像素将在侧面平均分配。 例：

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

现在在没有内容的侧面（因为像素较大），我希望有背景色。 那么，我将如何实现这一目标呢？ 如果这没有意义，请发表评论，我将尽力使其更加清楚。 谢谢 ：）

编辑：人们在问，为什么你不能只做width：100％。 那是行不通的，因为如果您缩小屏幕尺寸会弄乱所有内容。

Answer 1

欢迎来到SO。 没错，对于您要提出的问题，您的问题过于复杂。 您实际上要问的是“如何使div居中”。

#wrapper {
   margin: 0 auto;
}

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

body {
   background-color:#000;
}

编辑第一个问题： #wrapper {overflow:hidden}删除滚动条，尽管这实际上仅适用于图像，否则可以使用100％的宽度。 根据您的设计，您可能会受益于阅读响应式框架。

Answer 2

尝试这个：

CSS

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

Answer 3

我不确定您要什么。 我觉得这就是：

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

我认为@SajadLfc回答了您的问题，但仍然不确定，因为他投票了：/

Answer 4

获取屏幕的宽度和高度

用这个，

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

和

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

希望这可以帮助。