css - 减小窗口大小时使用 CSS 更改宽度大小

Question

一般来说，我希望 body div 的宽度为窗口大小的 60%。但也有一些异常(exception)。

在大型显示器上，这会变得太大，所以我将最大宽度设置为 800px，如下所示:

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

效果很好，文本在一定范围内调整，但在某个最大阈值时保持其形状。

现在我想对小窗口做类似的事情。

我添加了“最小宽度:300 像素；”这似乎通常会覆盖 60% 的宽度，但是，如果屏幕尺寸小于 300px，用户将不得不水平滚动才能看到部分文本。

我希望在查看器大小达到 300 像素阈值后实际宽度大小更改 90% 或 100%。

关于如何做到这一点有什么想法吗？

Answer 1

您可以使用媒体查询来实现此目的:JS Fiddle Example

@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)元标记，以便媒体查询在每台设备上正常工作:Viewport Meta Tag