CSS百分比和像素

我喜歡認爲自己有一些嚴重的CSS招搖（我也是一個PHP的黑客，並在Javascript很好），但今天我正在與設計師聊天的具體情況，說實話我只是不知道答案。我希望有人能詳細說明這個問題。CSS百分比和像素

場景：

我聽到許多人說，「哦，我使用的百分比，因爲響應式設計的一切」，但你去看看他們的CSS和他們使用的PX各地的地方邊距，填充等。

我的問題是，我應該使用像素嗎？我想說我理解這一點的主要難點在於何時涉及高分辨率屏幕。

例如，我創建了一個非常簡單的「英雄」，其中我將容器的高度設置爲700px高，背景圖像和一些文本，同時將其寬度設置爲100％。在我的屏幕上，我創建了它，它顯示了我的屏幕的全高（這是本意），但是當我有其他人在更高分辨率的筆記本電腦屏幕上查看它時，圖片的高度顯着縮短，下面有白色空間它沒有填滿屏幕的整個高度。

我正在找人解釋像素值在高分辨率屏幕上的確切影響，以及是否應該始終使用百分比。

例如，如果我在「普通」分辨率屏幕上將容器設置爲300px寬，那麼相同的容器在較高分辨率屏幕上的寬度將是150px，並且看起來也會縮小和可怕？

說我開始使用百分比的事情，如邊緣和填充，我很好奇，如何CSS將計算？例如，假設我有一個堆放在海誓山盟的頂部多輸入一個接觸的形式，我這樣做如下：

input { 
    margin-bottom: 2.5%; 
}

會在哪裏的CSS來計算是2.5％？它說，「讓高度是下邊距2.5％的它的父？我只是困惑，什麼將是基於關閉的。

任何輸入，非常感謝，謝謝。

來源

2017-02-23 Daniel Zuzevich

垂直填充和邊距從父寬度計算:) https://www.w3.org/TR/CSS2/box.html#margin-properties –

我的意思是當百分比用於評論這些2.5％:) –

頁邊距和填充值％始終是父寬度的百分比。

所以說你有一個margin-bottom: 25%;<div>，裏面另一個<div>這是1000像素寬，那麼<div>的下邊距爲1000 * 25％= 250像素。

.container { 
 
    width: 100px; 
 
    background: green; 
 
} 
 

 
.child25, 
 
.child45, 
 
.child-none{ 
 
    background: yellow; 
 
} 
 

 
.child25 { 
 
    margin-bottom: 25%; 
 
} 
 

 
.child45 { 
 
    margin-bottom: 45%; 
 
}

<div class="container"> 
 
    <div class="child25">This one should have 25px margin bottom.</div> 
 
    <div class="child45">This one should have 45px margin bottom.</div> 
 
    <div class="child-none">This one has no margin</div> 
 
</div>

至於你的英雄的問題，如果你想英雄的高度，以全屏幕的高度，用height: 100vh;，這意味着視口的高度的100％。

阿700像素高度元件將總是是對任何屏幕700像素高。實際感知的大小不同是因爲屏幕的ppi（像素每英寸）或dpi（每英寸點數），因爲它們通常在移動設備上調用。該值是指在該屏幕上填充每個實際英寸的像素/點的數量。

來源

2017-02-23 21:47:04 AVAVT

是的，謝謝！我想我會將它們更改爲'div'以避免混淆，因爲它與真正的主要問題xD – AVAVT

沒有關係。謝謝您的簡潔回覆。我很欣賞你們的迴應。 –

第一所有的，我想是指對SO給出一個答案，解釋的百分比屬性確實不錯：https://stackoverflow.com/a/31032477/4459695

所以我應該用像素
使用像素確實應該避免在現代網頁設計，幾簡單的理由：

像素已修復。他們不適應不同的屏幕尺寸或視口，縮放或佈局。由於移動首先是一個goto模式，並且響應式Web設計依賴於可適應的單位，並且由於像素是可以避免的，所以避免它們。
高分辨率屏幕變得越來越主流，如果你不想適應更多的媒體查詢（對於更大的屏幕），你不應該使用像素。
有更好的，更動態的選擇。這些包括vw,vh,em,rem，當然還有%。

但是何時使用哪個單元？
em和rem真的很適合字體大小或類似的東西。它們很容易縮放，也可以用於邊距和填充，這取決於內容大小。

%最好用於相對對象定位，而不是在邊距，填充或字體大小，儘管它們可以（邊距和填充是好的，我猜）。我的意思是，百分比在與width,height或類似的東西結合時效果最好（例如，它們在彈性佈局方面效果很好）。

vw and vh are allrounders - 我個人不會在特定情況下使用它們，但它們有時非常方便。最好的例子是覆蓋，它應該填充完整的視口。

所有這些單位都是動態的，並取決於視口。這非常棒，因爲這可以實現靈活的造型。像素不。

來源

2017-02-23 21:46:02 NikxDa

非常周到，而且反應非常詳細。我特別喜歡關於ems，rems等的額外補充。我標記了另一個正確的答案，就像它提供了關於我正在經歷的特定場景的更多細節。謝謝你的幫助。 –

CSS百分比和像素

回答

相關問題