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 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 Meta Tag

Answer 2

我会使用媒体查询来确定屏幕大小，并根据以下内容更改％宽度：

@media (max-width: 300px) {
  width: 90%;
}

浏览器将通读您现有的CSS并应用您在问题中描述的样式。媒体查询告诉浏览器将此新宽度应用于符合条件的任何屏幕 - 最多300px宽的屏幕。如果您有其他想要定位的断点（在本例中为宽度），您一次肯定可以使用多个媒体查询。