CSS - 百分比还是像素？

CSS - Percentages or Pixels?

提问by Mus

I have been using CSS for many years now, and I have always been a 'percentage' kind of guy, as in I always define heights and widths using percentages as opposed to pixels (except, for example, when setting things such as margins, padding, etc, in which case I use pixels).

我已经使用 CSS 很多年了，我一直是一个“百分比”类型的人，因为我总是使用百分比而不是像素来定义高度和宽度（例如，在设置诸如边距之类的东西时，填充等，在这种情况下我使用像素）。

I would do something like this:

我会做这样的事情：

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

but I often see examples such as this:

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

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

My question is this: are there any benefits to using one over the other overall, and if so, what are they?

我的问题是：使用一个比另一个整体有什么好处，如果有，它们是什么？

采纳答案by Graeme Leighfield

Mobile webpages. %'s rock for that. As it will (obviously) adjust to suit.

移动网页。% 的岩石。因为它会（显然）调整以适应。

However when you want a fixed width for say example an article of text that you want displayed in a certain way, px's is the winner.

然而，当你想要一个固定的宽度时，比如你想以某种方式显示的一篇文章，px 是赢家。

Both have many plus's and minus's over each other :)

两者都有很多优点和缺点：)

回答by Glenn Dayton

I use pixels on my website and I keep a maximum width of 1000px. My website displays properly on my 11" netbook, however does not do very well with mobile devices, but that is what this is for:

我在我的网站上使用像素，并且最大宽度为 1000 像素。我的网站在我的 11" 上网本上正常显示，但是在移动设备上表现不佳，但这就是它的用途：

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

I find developing websites in percentages very time intensive, having to consider all re-sizing events, such as:

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

overflow:scroll;

Pixels and percentages both have their perks, but I would say that pixels would be a better choice because of precision, reliability, and is easier to develop. Also another thing to consider are pixels and percentages for fonts. Here is my rule of thumb:

像素和百分比都有其优势，但我认为像素将是更好的选择，因为它具有精度、可靠性和更易于开发的特点。还要考虑的另一件事是字体的像素和百分比。这是我的经验法则：

• If you are developing a website with percentages, use percentages for the font, for the reasons of keeping proportions correct.
• If you are developing a website with pixels, use pixels for the font.

• 如果您正在开发带有百分比的网站，请为字体使用百分比，以保持比例正确。
• 如果您正在使用像素开发网站，请使用像素作为字体。

If you have people that may need to enlarge the font it is always better to use percentages for the font.

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

回答by Andrii Verbytskyi

Use Both=D

两者都用=D

With You can always combine using both if you are confused about it)

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

calc()is a native CSS way to do simple math right in CSS as a replacement for any length value (or pretty much any number value).

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

It has four simple math operators: add (+), subtract (-), multiply (*), and divide (/).

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

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

Browser Support is surprisingly good. Can I use...

浏览器支持出奇的好。我可以用吗...

Useful reading: CSS-Tricks

有用的阅读：CSS-Tricks

回答by Yogurt The Wise

If you want objects to be the same size not matter what, then pixels(not affected by zooming or screen size). Can also look into using EM's as well. I think EM's are sort of in the middle, where they are affected by zooming, but not by screen size.

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

回答by Mahi

in inner style top property is in %so it will count as 200px*0.3=60px

在内部样式顶部属性中，%所以它会算作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>

Here top is 30px . so it will be as it is.

这里顶部是 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>

回答by Joseph Marikle

Reasons aplenty! Percentage widths are very useful when it comes to sizing elements relative to something else (browser size for instance). You can have your page dynamically change to fit different circumstances. Pixels on the other hand are useful when you need precision sizes that won't change on you. Some people (e.g. me) use both pixels and percents to position elements how you want them. Others (e.g. people other than me :P) will tell you this is stupid.

理由千奇百怪！当涉及相对于其他东西（例如浏览器大小）调整元素大小时，百分比宽度非常有用。您可以让您的页面动态更改以适应不同的情况。另一方面，当您需要不会改变的精确尺寸时，像素很有用。有些人（例如我）同时使用像素和百分比来定位元素。其他人（例如我以外的人：P）会告诉你这很愚蠢。

回答by Chris

% are the way to go in a modern world just like Vector graphics. As screens get larger or smaller you can scale properly regardless of resolution.

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

回答by akwasiijunior

There is obviously no right or wrong. Its rather a matter of fluidity.

显然没有对错之分。而是流动性的问题。

It's easier to position objects relative to each other with pixels and to control exact height and width.

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

Scaling objects is on other hand easier with percentages. 50% of the window width will always be half of the window with no matter the screen size.

另一方面，使用百分比缩放对象更容易。无论屏幕大小如何，50% 的窗口宽度始终是窗口的一半。

回答by Akin Hwan

I like percentages too but it in certain cases it doesn't do what I expect. If for example i have two buttons sharing the same row with max-width: 50%, and the current viewport is not an even number, one of them will always be noticeably slightly larger.

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