使用 em 或百分比进行 CSS 网格布局答案

【问题标题】：using em or percentage for CSS grid layout使用 em 或百分比进行 CSS 网格布局
【发布时间】：2012-04-02 16:01:50
【问题描述】：

我正在开发一个 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%;
}

我应该使用百分比作为宽度，还是应该以某种方式使用 ems。我希望我能得到一些好的建议。

谢谢

【问题讨论】：

如果它真的很简单，内部应该是一个 % 外部是由你决定的......这更像是一个偏好问题
这总是一个权衡。总是 25% 宽的东西在智能手机上可能会变得太窄，但在全高清桌面显示器上却太宽。有些东西需要百分比宽度，其他东西需要em 或ch 的宽度。如果你让块保持浮动（你可以忍受浮动的缺点），结果在窄屏幕和宽屏幕上看起来都不错。但不要指望它。测试！

标签： javascript jquery html css jquery-ui

【解决方案1】：

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

一些额外的想法：

根据我的经验，%,px,em 的选择取决于项目（以及网站的目标）。

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

在这种情况下，（显然）相对系统更好，因为它们可以很好地扩展。这通常对用户更友好，因为您可以保证容器规模适当。如果您想让网站更易于访问，请使用此选项。

请记住，您可以使用基于像素/相对的布局，但仍然可以解决其他问题。通常整体布局是基于 % 的，但有些容器是基于像素的。

而且由于您使用 JS 来增强您的网站，您可以使用它来即时调整网站大小或做其他事情（尽管我不建议这样做，如果它不是必需的，因为事实上，不是每个人都使用 JS（但这是另一个故事））

【讨论】：

【解决方案2】：

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

【讨论】：

谢谢。我会检查你给我的链接。