在CSS网格布局中，应该使用em还是百分比？

Question

我正在制作一个3-4页的网站。它将使用jQuery、jQuery UI和Ajax调用来完成大部分页面。我希望不必以像素为单位编写任何内容。

到目前为止，我已经花了几天时间研究解决方案，但我的头脑已经很混乱，因为我无法找到我想要的东西。我正在尝试决定如何最好地布局网站，使其具有响应性，并且能够很好地适应浏览器大小的变化。在我看来，使用百分比或em设计的页面比使用固定px进行布局的页面更容易调整大小。

不确定，但我认为使用“网格”（例如黄金网格或其他一些网格）可能过于复杂。我正在考虑做这样一些事情？

#container {
  max-width: 75em;
  margin: 0 auto;
}

#primary {
  float:left;
  width: 25%;
}

#content {
  float:left;
  width:50%;
}

#secondary {
  float:left;
  width:25%;
} 

我应该使用百分比来设置宽度，还是用em单位？希望能得到一些好的建议。

谢谢

- Samantha J T Star

---

如果它真的很简单，内部应该是一个百分号，外部由你决定...这更多是偏好问题。 - David Nguyen

这总是一个权衡。始终为25％宽的东西可能在智能手机上太窄，但在全高清桌面监视器上太宽。有些东西需要百分比宽度，其他东西需要em或ch宽度。如果您保持块浮动（并且您可以忍受浮动的缺点），则结果在窄屏幕和宽屏幕上看起来可能还不错。但不要指望它。测试！ - Mr Lister

Answer 1

首先，在您的情况下请使用百分比。百分比是基于其父元素定位的，而em则基于字体大小。如果您想根据浏览器大小调整网站大小，请使用%，如果您希望每当用户更改字体大小时网站都会自动调整大小，请使用em。

以下是一些额外的想法：

从我的经验来看，%、px和em的选择取决于项目（因此也取决于网站的目标）。

如果该网站是某种作品集，我可能建议使用像素为基础的布局。（因为大多数人将它们视为其作品的数字版本，并希望它看起来与（预先布局的）草稿完全相同）。 这样可以得到不错的结果，但在调整网站大小时可能会遇到问题（例如，文本变得太大）。

在这种情况下，（显然）相对系统更好，因为它们可以很好地缩放。这通常更加用户友好，因为您可以保证容器按适当的比例缩放。 如果您想使网站更易访问，请使用此选项。

请记住，您可以使用像素/相对布局来解决其他问题。通常情况下，整体布局是基于百分比的，但某些容器是基于像素的。

由于您正在使用JS增强您的网站，因此您可以使用它来实时调整网站大小或执行其他操作（尽管如果没有必要，我不建议这样做，因为并非每个人都使用JS（但这是另一回事））。

- André Zoufahl

Answer 2

你可以使用这个：http://grids.heroku.com/，并在预览/下载时选择流体宽度选项。

- mikevoermans

---

谢谢。我会查看你给我的链接。 - Samantha J T Star