Question

当我查看较小的宽度时，它会转到我原来的桌面大小和所有内容，但是当我使用媒体查询时，它会将桌面大小更改为其他大小。我如何制作它以使原始尺寸回到桌面，较小的宽度是否与其他相同？当我更新媒体查询时，它只会更改原始桌面视图。

            .container{
                width: 960px;
                margin: 0px auto;
            }
            @media (min-width: 430px){
            .container { width:960px; margin: 0px auto;}
            }

Answer 1

您当前的代码说：如果浏览器窗口宽度超过430px，请覆盖现有容器规则并将容器宽度设置为960px（这是无稽之谈，因为当浏览器窗口比960px窄时，容器会更宽，将发生水平滚动）。同时，如果窗口窄于430px，容器将根据容器规则为960px。您可能想要做的是这样的事情：

.container {
  width: 100%;
  margin: 0;
}

@media only screen and (min-width: 430px) {
  .container {
    width: 400px;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 1000px) {
  .container {
    width: 960px;
  }
}

上面的样式将窗口宽度设置为低于430px的初始容器宽度设置为100％。一旦窗口比那个宽但窄于1000px，容器尺寸将设置为400px并居中。最后，如果窗口等于或大于1000px，容器宽度将设置为960px（覆盖将宽度设置为400px的规则，但请注意我没有覆盖边距规则，因此这仍然有效，因为浏览器窗口宽度超过430px，因此适用媒体查询。

如何更改媒体查询屏幕？

1 个答案: