Question

我已经使用CSS多年了，而且我一直都是'百分比'那样的人，因为我总是使用百分比来定义高度和宽度而不是像素（例如，设置这样的东西时除外）作为边距，填充等，在这种情况下我使用像素）。

我会做这样的事情：

body{
    height: 99%;
    width: 99%;
    margin-top: 10px;
}

但我经常看到这样的例子：

body{
    height: 300px;
    width: 250px;
    margin-top: 10px;
}

我的问题是：使用其他整体有什么好处，如果有的话，它们是什么？

Answer 1

移动网页。％的摇滚。因为它（显然）会适应。

但是，如果您想要一个固定的宽度，例如您希望以某种方式显示的文章，那么px就是赢家。

两者都有很多加号和减号：）

Answer 2

我在网站上使用像素，并保持最大宽度为1000像素。我的网站在我的11英寸上网本中正确显示，但是在移动设备方面表现不佳，但这就是它的用途：

<link rel="stylesheet" href="/styles/mobile.css" media="handheld" />

我发现开发网站的百分比非常耗时，不得不考虑所有重新调整大小的事件，例如：

overflow:scroll;

像素和百分比都有它们的特权，但我会说像素是更好的选择，因为它具有精确性，可靠性，并且更容易开发。另外要考虑的是字体的像素和百分比。这是我的经验法则：

如果您正在开发一个百分比的网站，请使用该字体的百分比，以保持比例正确。
如果您正在开发包含像素的网站，请使用字体的像素。

如果您有可能需要放大字体的人，最好使用该字体的百分比。

Answer 3

同时使用 = D

如果您对此感到困惑，可以随时使用两种方式结合使用）

calc()是一种原生的CSS方式，可以在CSS中进行简单的数学运算，作为任何长度值（或几乎任何数值）的替代。

它有四个简单的数学运算符： add (+)， subtract (-)， multiply (*)，和 divide (/)。

.my-class {
    widht: calc(100% - 20px);
    height: calc(50% + 10px);
}

浏览器支持非常好。 Can I use...

有用的阅读：CSS-Tricks

Answer 4

如果您希望对象的大小与大小无关，那么像素（不受缩放或屏幕大小的影响）。也可以考虑使用EM。我认为EM处于中间位置，它们受到缩放的影响，但不受屏幕尺寸的影响。

Answer 5

充足的理由！在相对于其他内容（例如浏览器大小）调整元素大小时，百分比宽度非常有用。您可以动态更改页面以适应不同的情况。另一方面，如果您需要不会改变的精度尺寸，则像素非常有用。有些人（例如我）使用像素和百分比来定位元素的方式。其他人（例如我以外的人：P）会告诉你这是愚蠢的。

Answer 6

％是现代世界的方式，就像矢量图形一样。随着屏幕变大或变小，无论分辨率如何，都可以正确缩放。

Answer 7

内部样式顶部属性中的

位于%，因此它将计为200px*0.3=60px

＆＃13;

#outer{
  border-style: dotted;
  position: relative; 
  height: 200px;
}
#inner{
 border-style: double;
  position: absolute;
  top: 30%; <<<<<<<<<<<<<<
}

＆＃13;

<div id="outer">
outer
<div id="inner">
inner
</div>
</div>

＆＃13;

这里顶部是30px。所以它会一如既往。

＆＃13;

#outer{
  border-style: dotted;
  position: relative; 
  height: 200px;
}
#inner{
 border-style: double;
  position: absolute;
  top: 30px; <<<<<<<<<<<<
}

＆＃13;

<div id="outer">
outer
<div id="inner">
inner
</div>
</div>

＆＃13;

Answer 8

显然没有对错。它相当于流动性。

使用像素相对于彼此定位对象并控制精确的高度和宽度更容易。

另一方面，使用百分比可以更轻松地缩放对象。无论屏幕尺寸如何，窗口宽度的50％始终是窗口的一半。

Answer 9

我也喜欢百分比，但在某些情况下它并没有达到我的预期。例如，如果我有两个按钮共享同一行的最大宽度：50％，并且当前视口不是偶数，则其中一个按钮总是会明显稍大。

CSS - 百分比还是像素数？

9 个答案: