CSS百分比宽度和高度以及分辨率问题答案

【问题标题】：CSS percentage widths and heights and resolution problemsCSS百分比宽度和高度以及分辨率问题
【发布时间】：2012-04-04 04:46:11
【问题描述】：

我需要我的应用程序以多种屏幕分辨率运行。目前我已经以百分比 (%) 而不是像素 (px) 指定了所有尺寸，以便它会自动随屏幕重新调整大小。

在我的网页上指定尺寸时，哪个是更可靠的度量单位：像素（或 EM）或百分比

【问题讨论】：

“可靠”取决于布局的结构和要求。
我认为这里最大的问题是响应式网页设计应该通过为每个分辨率提供一组单独的 css 规则来解决，而不是一些包含所有分辨率的主 css 文件（或者不是哪个更可能）

标签： css screen-resolution units-of-measurement

【解决方案1】：

对于Responsive Webdesign，您确实应该利用media queries

我个人更喜欢像素，因为它们给了我更多的控制权，而且我可以可靠地知道每个元素的确切尺寸。通过媒体查询，您还可以根据屏幕分辨率设置新样式。

百分比给你一种很好的响应感觉，但要确保你的布局不会被每个级别的分辨率弄得一团糟，可能要困难得多。

【讨论】：

【解决方案2】：

这两种方法都是“可靠的”。但是，如果您正在寻找自动调整大小，百分比是要走的路。如果您不希望元素根据窗口大小调整大小，像素会是更好的解决方案。

【讨论】：

【解决方案3】：

百分比始终适用于父元素的百分比，而像素始终是固定的。百分比更容易访问，尤其是在较小的显示器上但是你会遇到在错误的时间断线等问题。例如，如果您有一个 50 像素的图像和 100 像素宽的文本行，并且您希望这些项目位于同一行，请指定 150 像素的宽度，因为如果您指定百分比，它们可能会出现在您的显示器上而不是其他显示器上。

【讨论】：