Html 如何在CSS中调整窗口大小时调整主体边框的大小

我最近刚完成我的网站

如果您快速访问它，您会注意到右侧的绿色边框，以增加一点可读性。然而，如果你缩小窗口，你可以看到它最终覆盖了一切。它在移动设备屏幕上看起来也同样荒谬。如何使其调整大小

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

这是我的CSS文件的正文部分。

像这样尝试：

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

1vw=视口宽度的1%

1vh=视口高度的1%

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

---

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

您的

边框右侧：50em solid

造成了问题。请更好地解释以帮助你嘿，我理解你的问题。为了实现这一点，你必须开发一个响应迅速的网络。您可以使用Twitter引导框架来实现这一点。但只需尝试设置视口一次。在头标签中添加此行@普拉德维孔达，真是太棒了！谢谢！现在可以用我的手机了很好。。欢迎：）如果有帮助，请对评论进行投票：）太好了！没想到会这么容易。但这似乎不适用于移动屏幕。我猜需要另一种方法。