达到一定大小时的网站设置宽度[关闭]答案

【问题标题】：Website set width when a certain size is reached [closed]达到一定大小时的网站设置宽度[关闭]
【发布时间】：2020-06-08 10:42:29
【问题描述】：

大家好，我是使用 css 进行 Web 开发的初学者。我的网站宽度有问题：我将其设置为我的页面将占据屏幕的 70%：max-with: 70%。当我减小窗口的大小时，我想在它达到某个大小（如 600 像素）时将其设置为 100%。我怎么能意识到这一点？

Normal size

window mode

【问题讨论】：

欢迎来到 Stack Overflow！预计您至少会尝试自己编写代码。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
媒体查询教程 -> w3schools.com/css/css_rwd_mediaqueries.asp
CSS 媒体查询将解决您的问题，@McRaZick 已经提到媒体查询及其教程，为了完整起见，这是您需要的代码body { width:70% } @media only screen and (max-width: 600px) { body { width: 100%; } }
好的，谢谢你们。我做了一些研究，但我找不到任何相关的答案。 CSS媒体查询是解决方案。非常感谢！

标签： css web window width

【解决方案1】：

我认为您正在寻找通常用于使网页响应的 css 媒体查询。如果是这种情况，答案很简单，您只需为执行该任务的正文部分指定一个媒体查询。

下面的链接详细告诉你媒体查询的概念，请查看with this link

.section {
  width: 70vw;
  height: 200px;
  background-color: #000;
  margin: auto;
  color: #fff;
  text-align: center;
}

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<div class="section">
  hello world
</div>

</body>
</html>

顺便说一句，你想要的代码写在上面，所以你也可以通过它！！！尝试调整浏览器窗口的大小以获得结果...

希望对您有所帮助！问候，奥姆乔杜里

【讨论】：