使用em或CSS网格布局的百分比

我正在3-4页的网站上工作。它将为大部分页面使用jQuery，jQuery UI和Ajax调用。我希望不必编码任何像素。使用em或CSS网格布局的百分比

到目前为止我我已经花了几天看的解决方案，我的头在旋转，因为我看不到我想要的。我试图决定如何最好地布置网站，以便它能够响应，并且能够很好地适应浏览器大小的变化。在我看来，使用百分比或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做到这一点。我希望我能得到一些好的建议。

感谢

来源

2012-04-02 Samantha J T Star

如果它真的很简单，内饰应该是％外观取决于你......这更多是一种偏好问题 – 2012-04-02 16:04:17

它总是一种折衷。在25英寸宽的情况下，在智能手机上可能过于狭窄，但在全高清桌面显示器上太宽。有些东西需要百分比宽度，其他东西需要'em'或'ch'中的宽度。如果你保持块漂浮（你可以忍受漂浮的缺点），结果可能在窄屏幕和宽屏幕上看起来都不错。但不要指望它。测试！ – 2012-04-02 16:07:45

您可以使用此：http://grids.heroku.com/，当你预览/下载选择流体宽度选项。

来源

2012-04-02 16:04:02 mikevoermans

谢谢。我会检查你给我的链接。 – 2012-04-02 16:15:23

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

一些额外的想法：

从我的经验的百分比选择，PX，EM取决于项目（因此该网站的目标）。

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

在这种情况下，（显然）相对系统是更好的，因为它们很好地扩展。这通常更方便用户使用，因为您可以保证容器的尺寸合适。如果您想让网站更易于访问，请使用此功能。

请记住，你可以使用基于像素/相对布局，仍然解决其他问题。总体布局通常以％为基础，但一些容器是基于像素的。

由于您使用JS来增强您的网站，您可以使用它，动态调整网站大小或做其他事情（尽管我不会推荐这个，如果它不是必要的，由于事实，不是所有人都使用JS（但这是另一回事））

来源

2012-04-02 16:17:55

使用em或CSS网格布局的百分比

回答

相关问题