我何时使用像素/ ems / rems以及响应式网站（css）的百分比？

Question

我经历过这样的其他线程，但我仍然不太明白。 IMO我不应该使用除百分比以外的任何东西，因为一切都需要在不同的分辨率下进行不同的缩放，而这只能用百分比来做（对吧？）。

编辑：这是一个简单的更具体的问题。我希望仅使用CSS和HTML以最简单的方式使我的网站响应。那现在好多了吗？

Answer 1

您可以使用两者的组合，例如

main {
  width: XXrem; 
  max-width:100%;
}

因此，元素在较大的屏幕上将具有最佳的字体大小相关宽度，但如果从rem计算的宽度大于视口，则不会触发水平滚动。

另一个例子：

main {
  width: 100%; 
  max-width:1024px;
}

现在你有一个容器在较小的屏幕上填充视口，但在较大的屏幕上固定为1024px。比使用媒体查询设置断点更容易。

您还应该查看viewport based units：vw，vh，vmin，vmax - 这些有点像使用百分比，但是{{1始终是视口宽度的1％，而不是父容器。你可以使用这些单位（如字体大小或边框宽度），而不仅仅是投币器。您甚至可以使用1vw来设置字体大小，因此vw和em等单位会与视口相关。

Answer 2

你可以坚持任何一个，也可以两者兼用。如果您不想在媒体查询中写更多css，请使用百分比。如果使用百分比，元素大小将自动响应。如果您可以处理媒体查询，也可以使用px，em或rem中的任何一个。