javascript - 在 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%;
} 

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

谢谢

Answer 1

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

一些额外的想法:

根据我的经验，%、px、em 的选择取决于元素(以及网站的目标)。

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

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

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

并且由于您正在使用 JS 来增强您的网站，您可以使用它来动态调整网站大小或做其他事情(尽管我不推荐这样做，如果不是必需的话，因为事实是，不是每个人都使用 JS(但这是另一回事))