我已经使用 CSS 很多年了，而且我一直是一个“百分比”类型的人，因为我总是使用百分比而不是像素来定义高度和宽度（例如，在设置诸如作为边距、填充等，在这种情况下我使用像素）。
我会这样做：
body{
height: 99%;
width: 99%;
margin-top: 10px;
}
但我经常看到这样的例子：
body{
height: 300px;
width: 250px;
margin-top: 10px;
}
我的问题是：总体而言使用其中一个有什么好处，如果有，它们是什么？
【问题讨论】：
标签： css
移动网页。 % 的摇滚乐。因为它将（显然）调整以适应。
但是，如果您想要一个固定的宽度，例如您希望以某种方式显示的文本文章，那么 px 是赢家。
两者都有很多加号和减号:)
【讨论】：
我在我的网站上使用像素，并保持最大宽度为 1000 像素。我的网站在我的 11" 上网本上正常显示，但在移动设备上表现不佳，但这就是它的用途：
<link rel="stylesheet" href="/styles/mobile.css" media="handheld" />
我发现按百分比开发网站非常耗时，必须考虑所有调整大小的事件，例如：
overflow:scroll;
像素和百分比都有其优点，但我想说像素会是更好的选择，因为它具有精确性、可靠性并且更易于开发。还要考虑的另一件事是字体的像素和百分比。这是我的经验法则：
如果您有可能需要放大字体的人，最好使用字体百分比。
【讨论】：
同时使用 =D
如果您对此感到困惑，可以随时将两者结合使用）
calc() 是一种原生 CSS 方式，可以直接在 CSS 中进行简单的数学运算，以替代任何长度值（或几乎任何数值）。
它有四个简单的数学运算符：
add (+),
subtract (-),
multiply (*)，和
divide (/).
.my-class {
width: calc(100% - 20px);
height: calc(50% + 10px);
}
浏览器支持出奇的好。 Can I use...
有用的阅读：CSS-Tricks
【讨论】：
如果您希望对象的大小无论如何都相同，那么像素（不受缩放或屏幕大小的影响）。 也可以考虑使用EM。我认为 EM 处于中间位置，它们受缩放影响，但不受屏幕尺寸影响。
【讨论】：
% 是现代世界的必经之路，就像矢量图形一样。随着屏幕变大或变小，无论分辨率如何，您都可以正确缩放。
【讨论】：
inner style top 属性在% 所以它会算作200px*0.3=60px
#outer{
border-style: dotted;
position: relative;
height: 200px;
}
#inner{
border-style: double;
position: absolute;
top: 30%; <<<<<<<<<<<<<<
}<div id="outer">
outer
<div id="inner">
inner
</div>
</div>这里的顶部是 30px 。所以它会保持原样。
#outer{
border-style: dotted;
position: relative;
height: 200px;
}
#inner{
border-style: double;
position: absolute;
top: 30px; <<<<<<<<<<<<
}<div id="outer">
outer
<div id="inner">
inner
</div>
</div>【讨论】：
原因很多！在相对于其他东西（例如浏览器大小）调整元素大小时，百分比宽度非常有用。您可以让您的页面动态更改以适应不同的情况。另一方面，当您需要不会改变您的精确尺寸时，像素很有用。有些人（例如我）同时使用像素和百分比来定位元素的位置。其他人（例如我以外的人 :P）会告诉你这是愚蠢的。
【讨论】：
显然没有对错。而是流动性的问题。
使用像素相对于彼此定位对象并控制精确的高度和宽度更容易。
另一方面，使用百分比更容易缩放对象。无论屏幕大小如何，50% 的窗口宽度始终是窗口的一半。
【讨论】：
我也喜欢百分比，但在某些情况下它并没有达到我的预期。例如，如果我有两个按钮以 max-width: 50% 共享同一行，并且当前视口不是偶数，则其中一个总是会明显略大。
【讨论】：