当窗口大小减小时,使用CSS更改宽度大小

Question

一般来说,我希望我的身体div是窗口大小的60%宽度.但也有一些例外.

在大型显示器上,这太大了,所以我设置了800px的最大宽度,如下所示:

#lbp-text-body {margin-top: 100px; width: 60%; max-width: 800px; text-align: justify}

这非常好用,文本在一定范围内调整,但在某个最大阈值处保持形状.

现在我想为小窗口尺寸做类似的事情.

我加了'min-width:300px;' 这似乎通常似乎覆盖宽度60%,但是,如果屏幕尺寸小于300px,用户将不得不水平滚动以查看部分文本.

在观看者尺寸达到300px阈值后,我希望实际宽度尺寸改变90%或100%.

有关如何做到这一点的任何想法？

Answer 1

您可以使用媒体查询来实现此目的:JS小提琴示例

@media only screen and (max-width: 300px) {
  #lbp-text-body {
     // Whatever Styles you want to have at 300px or less
  }
}

如果窗口大于特定宽度,您还可以使用媒体查询来使用特定样式min-width.

@media only screen and (min-width: 800px) {
  #lbp-text-body {
     // Whatever Styles you want to have at 800px or more
  }
}

作为旁注,您需要确保具有正确的视口元标记,以便媒体查询在每个设备上正常工作:Viewport Meta Tag