达到一定尺寸时网站设置宽度

Question

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

Normal size

window mode

Answer 1

我认为您正在寻找 css 媒体查询，这些媒体查询通常用于使网页具有响应性。如果是这种情况，答案非常简单，您只需为 body 的那部分指定媒体查询即可完成任务。

下面link详细的告诉你媒体查询的概念，看看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>

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

希望对您有所帮助！你好，欧姆·乔杜里

达到一定尺寸时网站设置宽度

Website set width when a certain size is reached

css

window

width

web