时间戳

首页 > 解决方案 > 达到一定大小时的网站设置宽度

css - 达到一定大小时的网站设置宽度

问题描述

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

正常尺寸

窗口模式

标签： csswebwindowwidth

解决方案

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

下面的链接详细告诉您媒体查询的概念，请通过此链接查看

.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>

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

希望对你有帮助！问候，奥姆·乔杜里

推荐阅读