设置元素宽度和高度的最佳方法是什么？ [关闭]答案

【问题标题】：What is the best way to set width and height of elements? [closed]设置元素宽度和高度的最佳方法是什么？ [关闭]
【发布时间】：2014-03-18 14:22:09
【问题描述】：

每个网站都有元素，并且必须设置它们的宽度和高度。这是我的问题，我们如何设置宽度和高度，以便网站在不同宽度/高度的不同显示器上正常工作？ px 比 % 更受欢迎吗？什么时候应该使用 px，什么时候应该使用 %？各有什么优缺点？

【问题讨论】：

视情况而定。请阅读 alistapart.com/article/responsive-web-design 和 alistapart.com/article/fluidgrids 以帮助您入门。
宽度和高度不必在网站上的元素上专门设置。当然可以，但不一定非要如此。如果您设置宽度，这将取决于您的网站是固定宽度还是响应式/自适应。
它们用于不同的目的。具有弹性或静态尺寸既有优点也有缺点，但更重要的是，可以响应特定的设计决策。

标签： html css web

【解决方案1】：

这完全取决于您网站的类型以及您希望如何响应各种屏幕分辨率。

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

我们还有media queries

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问题Responsive Layout - PX, EM, or %?

【讨论】：

【解决方案2】：

当您想以像素为单位指定固定/静态高度时，请使用 px。 % 是指父元素的总百分比。使用百分比表示网站会在调整浏览器大小时进行调整，而使用像素则不会。

您选择哪一种取决于您想要实现的外观和感觉。

【讨论】：

当我使用px 并调整浏览器大小时，会出现滚动条，但是当我使用% 并调整浏览器大小时，所有网站都会出现故障。我该怎么办？
你是指浏览器上的滚动条吗？这是因为当您调整浏览器窗口时，它无法调整像素大小，因此它会添加滚动条以允许您查看所有内容。如果您使用百分比，那么它会尝试调整内容以适应浏览器窗口，因此不需要滚动条。但是，您可以使用溢出 css 属性将滚动条添加到任何元素。

【解决方案3】：

这完全取决于您打算做什么样的网络。

许多网页使用像素固定宽度（如 960 像素）的容器。那么，如果您在 Photoshop、Illustrator、indesign 等方面有一个制作精良的预设计来处理像素，那就非常容易了。这些网络虽然在 PC 屏幕之外不能很好地工作，就好像您的窗口宽度小于容器，除非水平滚动，否则内容不会显示。

现在，如果您希望您的内容调整到任何水平宽度，您应该使用 % 但 imo 这很困难，您需要在开始工作之前清楚地知道要在每个可能的宽度上显示什么。

如果您决定采用“响应式”设计……工作会更加困难。我建议你使用类似的东西：

@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

【讨论】：