在響應式設計中定義PX與EM的邊框寬度

Question

我的整個樣式表都是使用em而不是px完成的。整個主題都是響應式的。

我所看到的，我想改變px的唯一事情是一個類，增加了一個邊界：

.border { 
    border-width: 0.1em; 
    border-style: solid; 
} 

的0.1em似乎在大多數地方厚一點。我想改變這px：

.border { 
    border-width: 1px; 
    border-style: solid; 
} 

我知道我可能過於挑剔這裏，但沒有任何理由定義邊框的寬度時，我不應該用px？如果是這樣，有沒有什麼辦法可以讓0.1em向下看起來更像1px？

Answer 1

而不是定義它，你說你不滿意，在px中定義它，但將值更改爲2px或3px等，因爲該網站通過媒體查詢更改。那麼你有確定的控制。

@media screen and (min-width:30em) { .border {border:1px;} } 
@media screen and (min-width:50em) { .border {border:2px;} } 

缺點是如果你想在屏幕尺寸上增加一點點，你的CSS變成書的長度。那麼你只是過於挑剔。

Answer 2

如果您希望您的邊框寬度具有響應性，請不要使用px。 Px是固定大小的單位，並將儘管有任何其他響應的變化不變。因此，相對於頁面的其他部分，您可能會遇到邊框寬度較小或較大的風險。

您是否測試1px看起來如何當您的font-size（em比例尺爲font-size）增加或減少？