浏览器缩放和元素宽度

Question

我的设计中有一行，我的内容有一个width: 1200px，但我想让这一行相对于屏幕显示width: 100%，例如当用户调整大小（使用浏览器缩放）屏幕时，将其缩小，此行仍然需要width: 100%，其他元素将保留width: 1200px，并且它可以工作，但是当我缩放屏幕以使元素更大时（缩放130％）线条变小，当我用户滚动条滚动到屏幕右侧时，线条被撕开。以下是该行的样式：

#blue_line {
position: absolute;
width: 100%;
left: 0;
right: 0;
height: 5px;
background-color: #08c5ef;
z-index: 20;

}

如果它nessasery我可以发布小提琴。谢谢！

Answer 1

如果我理解你的问题，在高度上使用vh（视口高度）应该为你解决这个问题。

#blue_line {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    height: 1vh;
    background-color: #08c5ef;
    z-index: 20;
}