Question

我刚刚完成了我的网站。

http://www.willigetdivorced.com

如果您快速访问它，您会注意到右侧的绿色边框，以增加一点可读性。如果你缩小窗口，你可以看到它最终覆盖了所有东西。在移动设备屏幕上看起来同样荒谬。我如何制作它以便调整大小？

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

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

Answer 1

试试这样：

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

1vw =视口宽度的1％

1vh =视口高度的1％

这些测量为您提供了一种很好的方法来定义边界百分比等宽度和高度。

为了调整与当前视口大小相关的内容，您可以找到更多here

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

1 个答案: