CSS - 百分比还是像素数？

Question

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

我会做这样的事情:

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

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

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

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

Answer 1

移动网页.%的摇滚.因为它(显然)会适应.

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

两者都有很多加号和减号相互:)

我有一台上网本.固定宽度很恶心.大多数网站都有它们.做一个移动设计很好,很大,但两者之间有一个空间. (2认同)
最绝对的是@Nicholas Wilson,但这一切都归结为一件事,这就是网站的目的.它的设计应该是什么样的,它应该如何导航.在制作任何网站时,首先要讨论的内容. (2认同)

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);
}

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

有用的阅读：CSS-Tricks