如何將頁面中的內容調整為僅占用屏幕寬度？

Question

使用開發工具，我的內容會以較低的 bps 縮小。 從我的 header 導航到頁腳的所有內容都在容器內。 容器設置為：

.container {
    width: 800px;
    margin: 0 auto;
    border: 2px solid green;
}

在 800 像素處，我有一個水平滾動並且內容縮小，在頁腳底部增加了空間。 使用媒體查詢，我怎樣才能用容器填充屏幕？ 788 bp 屏幕

Answer 1

我認為您正在尋找媒體查詢：

@media only screen and (max-width: 800px) {
  .container {
    width: 100vw;
  }
}

在這里查看文檔。

干杯!

Answer 2

width:100%這將使容器 div 占據所有視口。

Answer 3

我認為您想要的是width: 100%和max-width: 800px 。