Question

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

@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％。这样做是行不通的，因为如果你缩小屏幕尺寸，就会弄乱一切。

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;

希望这有帮助。

适合屏幕尺寸的网站

4 个答案: