当 window 在 CSS 中调整大小时，如何调整正文边框的大小

Question

我在右边有一个小的绿色边框，以增加一点可读性。但是，如果您缩小 window，您会看到它最终覆盖了所有内容。它在移动设备屏幕上看起来同样荒谬。我该怎么做才能调整大小？

body {
  color: #325050;
  background: #fff;
  font-family: 'Libre Baskerville', sans-serif;
  font-size: 80%;
  border-right: 50em solid;
}

Answer 1

这样试试：

body {
  color: #325050;
  background: #fff;
  font-family: 'Libre Baskerville', sans-serif;
  font-size: 80%;
  border-right: 50vw solid; /* changed*/
}

1vw = 1% of viewport width

1vh = 1% of viewport height

这些度量为您提供了一种很好的方式来定义宽度和高度，例如以百分比表示的边框。

关于相对于当前视口大小调整事物的大小，您可以找到更多信息here

当 window 在 CSS 中调整大小时，如何调整正文边框的大小

How do I resize the border of the body as the window resizes in CSS

html

css

resize

border