如何将页面中的内容调整为仅占用屏幕宽度？答案

【问题标题】：How do I adjust the content in a page to only take up screen width?如何将页面中的内容调整为仅占用屏幕宽度？
【发布时间】：2020-04-21 19:21:29
【问题描述】：

使用开发工具，我的内容会以较低的 bps 缩小。从我的页眉导航到页脚的所有内容都在一个容器内。容器设置为：

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

在 800 像素处，我有一个水平滚动并且内容缩小，在页脚底部增加了空间。使用媒体查询，我怎样才能用容器填充屏幕？ screen at 788 bp

【问题讨论】：

【解决方案1】：

我认为您正在寻找媒体查询：

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

查看文档here。

干杯！ ?

【讨论】：

【解决方案2】：

width:100% 这将使容器 div 占据所有视口。

【讨论】：

【解决方案3】：

我想你想要的是width: 100% 和max-width: 800px。

【讨论】：