使網站適合屏幕尺寸

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;

希望這可以幫助。