做響應式設計時，什麼是首選單位？

我正在建立一個響應式網站，我想知道我應該使用什麼單位？我已經看過很多使用像素（px）進行測量的網站，並且我已經看到一些使用百分比（％）的網站。有沒有一種首選或正確的方式來做響應式設計？做響應式設計時，什麼是首選單位？

我發現百分比難以使用，因爲它使計算變得困難，並且在設置寬度/邊距等時，我最終得到了2.754％等值。像素看起來更容易，它只是簡單的加法和減法，但我讀過它不是「未來的證明」或類似的東西，如果用戶在瀏覽器窗口中放大，將不會正確縮放。這仍然是真的嗎？

如果您有任何經驗或專業知識，請分享！我很想聽聽你們要說的話！

謝謝！

來源

2013-04-06 Zen5

_Responsive_和_absolute values_（像素）相互矛盾一點點。大多數情況下，爲簡單屬性（'width'）使用相對值和爲min/max（'max-width'，'min-width'）使用絕對值會更容易。這樣它仍然保持響應，但你可以對樣式容器的寬度做一些假設。 – Zeta 2013-04-06 12:36:39

請參閱[這個問題]（http://stackoverflow.com/questions/12450961/responsive-layout-px-em-or） – Bigood 2013-04-06 12:38:01

我認爲答案大多是正確的。無論如何，CSS中有很多單位。從Chris Coyier看到這篇文章：http://css-tricks.com/the-lengths-of-css/ – pzin 2013-04-06 14:04:30

使用百分比以及最小寬度和最大寬度（以像素爲單位）。這阻止百分比使你的div太小或太大。例如

div { 
    width:100%; //full width of browser 
    max-width: 960px; //this means it will be 100% of the browser until 960px then it will stop expanding 
}

來源

2013-04-06 12:37:13 Vector

當然，您必須使用百分比。但與min-height,max-height,min-width,max-width CSS鍵。

對於下一代

VW和VH。 vw是窗口寬度的1/100，vh是窗口高度的1/100。對於響應能力，他們將成爲新的單位。

來源

2013-04-06 12:40:02 zkanoca

我試過它在Firefox 20上。 – zkanoca 2013-04-06 12:44:39

是的，我認爲他們在幾個瀏覽器中工作，但沒有接近非實驗開發的地方：P – 2013-04-06 12:48:55

對於佈局型喜歡的東西的盒子的大小，要使用%，因爲你通常會有幾列大小其父的百分比將在某個轉折點上相互疊放（width:100%）。沒有其他單位將允許你填充100％的空間，如%。

對於填充/頁邊距使用em，通常您會希望將元素相對於文本大小進行空間分隔。用em（帶'M'字符），你可以很容易地說我想在這裏大約有1個字符的間距。

對於邊框您可以使用px或em，但有一點不同。如果您希望您的邊框看起來像所有設備上的一個像素寬，請使用1px。它可能不是所有設備上的一個像素，但高密度顯示器例如將1px轉換爲2px。如果您希望邊框的尺寸基於您的字體，請使用em。

對於字體使用em（或%），使用em攜帶通過父母對孩子，它只是一個更好的單位有超過px工作。

來源

2013-04-06 12:41:08

這與一組規則非常相似。這個答案是一個很好的指導，但有很多情況下，使用其他單位可以更好地工作 – 2016-03-18 12:31:51

對於邊界，你也可以使用'thin'，'medium'和'thick'。它們與'1px'，'3px'和'5px'相對應，但也可以根據變焦等因素進行縮放。它們也比'em'更好，因爲用'em'定義的邊框在縮小時會消失，其寬度變成小於1px。 – tomasz86 2016-04-21 02:26:07

做響應式設計時，什麼是首選單位？

回答

相關問題