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 - 百分比還是像素？

回答

相關問題