CSS - 百分比还是像素？

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

我会做这样的事情：

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

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

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

我的问题是：有没有使用了另一种任何好处整体，如果是这样，它们是什么？

谢谢。

米克

来源

2011-09-02 MusTheDataGuy

有到任何一个没有任何好处，这就像说给我1KG，或500克50％，取决于你的应用 – Jakub

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

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

两者有许多正的和负的超过对方:)

来源

2011-09-02 14:39:04

我有一个上网本。固定宽度令人厌恶。大多数网站都有他们的地方。做一个移动设计是很好的，也是一个很大的，但它之间有一个空间。 –

最肯定@Nicholas威尔逊，但是这一切都归结为一件事，该网站的目的是什么。它的设计应该是什么样子，它应该如何导航。在制作任何网站时首先讨论的事情。 –

如果你希望对象是相同的大小没有关系的，那么像素（不受缩放或屏幕尺寸）。也可以考虑使用EM's。我认为EM的位置在中间，它们受到缩放的影响，但不受屏幕大小的影响。

来源

2011-09-02 14:42:21

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

来源

2011-09-02 14:44:08

我在我的网站上使用像素，我保持1000px的最大宽度。我的网站可以正确地显示在我的11" 上网本，但不与移动设备做的非常好，但就是这是什么：

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

我觉得发展中非常耗费时间的百分比网站，不必考虑所有重-sizing事件，如：

overflow:scroll;

像素和百分比都有自己的福利，但我要说的是，像素将是因为精度，可靠性更好的选择，而且更易于开发也是另一个要考虑的。是字体的像素和百分比。下面是我的经验法则：

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

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

来源

2011-09-02 15:28:48

我认为DIV的％是合适的，而Px是字体，更多的控制。 :) –

％是像现代矢量图一样去现代化的世界。当屏幕变大或变小时，无论分辨率如何，都可以正确缩放。

来源

2015-07-22 23:23:49 Chris

-1

显然没有对错。它相当流畅。

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

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

来源

2016-10-27 09:07:46 akwasiijunior

因为我觉得这主要是基于观点的，所以答案往往会根据意见，而不是硬其实我检举了这个问题本身是题外话。你的回答基本上是“别人不会像X，所以X必须更好”，这是不是真的太多的答案;这更多的是评论。 – Mike

在内部风格顶级物业是%所以将计为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>

这里顶部30像素。所以它会保持原样。

#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>

来源

2016-12-15 08:23:39 Mahi

同时使用 = d

随着你总是可以结合使用这两种，如果你对此感到困惑）

calc()是土生土长的CSS的方式做简单数学正好在CSS中取代任何长度值（或几乎任何数值）。

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

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

浏览器支持出人意料的好。 Can I use...

有用的书：CSS-Tricks

来源

2016-12-15 08:46:47

我喜欢百分比太多，但它在某些情况下，它不会做什么我的期望。例如，如果我有两个按钮具有最大宽度共享同一行：50％，和在当前视口是不是偶数，它们中的一个总是会明显稍大。

来源

2017-04-06 15:52:32

CSS - 百分比还是像素？

回答

相关问题