更改浏览器比例时使用 html-元素宽度

Question

我有以下 html-murkup 结构：

<div class="wrapper">
     <div class="my_line"></div>
</div>

Wrapper 的宽度为 1200 px。当用户更改屏幕比例时，我想让 div.my_line 的宽度为屏幕的 100%。我怎样才能做到这一点？我尝试使用 background-repeat，我是前端新手，有人可以帮助我吗？

Answer 1

所以只是猜测，但是您希望 my_line div 在屏幕达到 1200 像素时拉伸 100% 的宽度？

如果是这样，你会使用这个：

/* Check the screen width, in this case looking for the screen to reach 1200px or below. Then extend the my_line div to 100% */
@media (max-width: 1200px) {
  .wrapper .my_line {
    width: 100%;
  }
}

Answer 2

因此，如果您希望 my_line 与 wrapper 大小相同并在调整 window 大小时缩小，请使用此方法：

.wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.wrapper .my_line {
    width: 100%;
}

这样 wrapper 将拥有 100% 的浏览器，但会受到限制并始终居中。而 my_line 将继承整个宽度。

因此，当您调整到小于 1200px 时，wrapper 和 my_line 将随着 window.

缩小

编辑：

如果你想让 my_line 比 wrapper 大，为什么要把它放在 wrapper 里面？只需将它放在 wrapper 的上方或下方。

如果您更改 HTML，您得到的解决方案仍然有效。您的解决方案的问题是，如果您稍后将 position: relative 添加到 wrapper ，它将不起作用。如果您更改 HTML 结构，使 my_line 是 body 的直接子结构，它仍然有效。

Answer 3

谢谢大家，我这样做了，它有帮助：

.my_line {
    position:absolute;
    width: 100%;
    left:0;
    right:0;
    height: 3px;
}

更改浏览器比例时使用 html-元素宽度

Work with html-element width when change scale of browser

html

css

width

编辑：