填充高度/邊距/邊框的百分比是否可以優於em？

Question

垂直CSS聲明的百分比值的好用和推薦用法是什麼？

換句話說，在響應式設計下，我們是否忽略了％會對em有利的東西？

因爲它似乎在大多數情況下（除了您要等於所有邊的案件; credit），em將比%得到更好的服務，請考慮：

使用百分比水平填充值，CSS中元素的邊距或邊界是相當標準的 - 特別是在響應式網頁設計中。例如，採取margin-left: 7.2%和padding: 0 5%。這也是有道理的：屏幕越寬，空間就會按比例增加。

一個可以用於垂直值做同樣的：

margin-top: 5%; 
padding: 10% 0; 
border: 1% 0 2% 0; 

正如預期的那樣，增加的視口寬度將增加相應的垂直空間。

但是，在我遇到的情況下，它看起來有點奇怪 - 不適合設計。看來em的值可能會更好。*但是，另一方面，使用百分比在哪裏會有好處？

_{*由於這些不會隨着屏幕的寬度而增加，而是會根據頁面的字體大小而增加。}

Answer 1

我不認爲這個問題有任何正確或錯誤的答案。它確實取決於你的設計。

正如您所指出的那樣，即使在基於垂直屬性的保證金&填充上，％值仍然相對於文檔的寬度。所以如果你的設計需要填充，那麼所有的值都很好。但是，如果設計是面向內容的，並且您仍然在響應設計的水平屬性上使用％值，則％可能不是垂直屬性的最佳值。例如，您可能希望padding-top恰好是1行文本的高度。所以你會用ems。

但我離題了;它確實取決於你的設計和個人喜好。

Answer 2

是的，根據情況就像任何其他的CSS練習。

假設你有一個使用100％屏幕高度的容器div，並且你有一個頭部你想出現在你的div頂部。你可以在你的標題上說margin-top: 15px，它可以工作，但如果我來看我的手機，它會顯得非常糟糕。

因此，您可以說margin-top: 10%然後無論我來到哪個屏幕並在您的標題上查看您的網站總是從div頂部10％。這意味着您的佈局的相對流量將始終相同。

一般規則是這樣的：對於任何有效的CSS你可以寫有一個用例，它將是實現你的設計目標的最好方法。忘記任何人說「永遠不要使用負邊距」或「總是避免絕對定位」或任何其他垃圾扔掉。

Answer 3

我一直在思考這個問題，最近以及在閱讀了互聯網後，我開始依賴的'經驗法則'如下。首先，％爲水平軸的良好響應設計的原因是因爲衆所周知，根據用戶是在手機還是計算機上，瀏覽器的寬度可能會有很大差異。縱軸是不同的，因爲雖然它也可以像橫軸一樣變化，但是爲垂直滾動創建了許多網頁，並且用戶期望向下滾動。在這種情況下，由於ems響應較差，更多的垂直滾動就可以了。

要根據此假設回答您的問題，您將使用％作爲垂直邊距的時間是當您有一個設計，您不希望讓用戶滾動很多以查看頁面的一部分。具體的例子可能是一個單頁面的網頁應用程序，你不需要任何滾動或標題或初始頁面內容，例如你希望用戶完整看到而不必向下滾動的圖片。