什么是设置元素宽度和高度的最佳方法？

Question

每个网站都有元素，它们的宽度和高度必须设置。那么问题来了，我们该如何设置宽度和高度，以使网站在不同宽度/高度的监视器上正确运行？使用 px 比使用 % 更好吗？我们应该何时使用 px，何时使用 %？每种方法的优缺点是什么？

- M a m a D

---

这要看情况。建议先阅读 http://alistapart.com/article/responsive-web-design/ 和 http://alistapart.com/article/fluidgrids 以帮助你入门。 - Olly Hodgson

网站元素上的宽度和高度不一定需要特别设置。当然，它们可以被设置，但并不一定必须。如果您要设置宽度，这将取决于您的网站是固定宽度还是响应/自适应宽度。 - Billy Moat

它们用于不同的目的。具有弹性或静态尺寸都有优缺点，但更重要的是响应特定的设计决策。 - Luis Masuelli

Answer 1

当您想要指定像素的固定/静态高度时，请使用px。％是指元素父级总量的百分比。使用百分比意味着网站将在浏览器调整大小时进行适应，而使用像素则不会。

您选择哪个取决于您尝试实现的外观和感觉。

- B-Lat

---

当我使用 px 并调整浏览器大小时，滚动条会出现，但是当我使用 % 并调整浏览器大小时，整个网站都会乱掉。我该怎么办？ - M a m a D

你是指浏览器上的滚动条吗？这是因为使用像素时，它无法随着调整浏览器窗口大小而重新调整大小，因此添加滚动条以允许您查看所有内容。如果您使用百分比，则会尝试使内容适应浏览器窗口大小，因此不需要滚动条。但是，您可以使用overflow CSS属性向任何元素添加滚动条。 - B-Lat

Answer 2

这完全取决于你的网站类型以及你想要如何响应不同的屏幕分辨率。

仅使用 % 和 px 是不够的，还有其他的文本大小单位，例如 em 和 pt 等。

此外，我们还有 媒体查询。

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

http://msdn.microsoft.com/en-us/magazine/hh653584.aspx

http://www.htmlgoodies.com/html5/client/common-techniques-in-responsive-web-design.html#fbid=YIeEpYZXBt-

相关的SO问题 响应式布局-使用PX，EM还是％？

- Vinay Pratap Singh Bhadauria

Answer 3

这完全取决于您计划做什么样的网站。

许多网页使用固定宽度的容器（如960像素）。如果您有一个在Photoshop，Illustrator，InDesign等上精心制作的预设计，则使用像素非常容易。然而，这些网站在PC屏幕外表现不佳，因为如果窗口宽度小于容器，则内容将不会显示，除非水平滚动。

现在，如果您希望内容适应任何水平宽度，则应使用％，但我认为这更加困难，并且您需要在开始工作之前清楚地了解要在每个可能的宽度上显示什么。

如果您决定采用“响应式”设计...那么工作将更加困难。我建议您使用类似于：

@media screen and  (min-width:600px) {}
@media screen and  (min-width:800px) {}
@media screen and (min-width:1024px) {}
@media screen and (min-width:1524px) {} 

在你的CSS中，可以调整你的类别，使得每个宽度（或平台）都能满足需要。同时还有很多其他有用的@medias。

- Alvaro Menéndez