css - only - style @media




切換到基於Em的媒體查詢 (2)

  1. 在現代瀏覽器中,如果瀏覽器正確處理縮放,則基於em和基於像素的媒體查詢之間應該沒有區別。 我實際上在一個項目中遇到基於em的媒體查詢的問題,因為在其中一個媒體查詢中,基本字體大小發生了變化,然後所有其他媒體查詢都搞砸了。 這可能只是一個愚蠢的錯誤,但你明白了。 我會選擇像素。 請參閱下面的更新 雖然縮放對現代瀏覽器沒有影響,但基本字體大小仍然有效。

  2. 我看到你遇到的最大問題是62.5%的技術和rem ,如果你遇到了不理解它的瀏覽器。 如果您擔心這一點,您可以為功能較少的瀏覽器添加備用,並為現代瀏覽器設置rem

    html { font-size: 62.5%; }
    body { font-size: 14px; font-size: 1.4rem; }
    h1   { font-size: 24px; font-size: 2.4rem; }
  3. 如果瀏覽器處理pxem速度有任何差異,那就不明顯了。 瀏覽器真的非常快速地計算CSS(比JS快得多)。 所以它可能不值得擔心。

測量的優點,缺點和用途

PX

我過去曾使用px進行媒體查詢,因為它們非常可靠,就像你說的那樣,它們可以放大。 更新:但是,如果用戶更改其默認樣式表,您的媒體查詢將會關閉。

  • 獨立於CSS級聯
  • 主要是非相對測量(僅取決於瀏覽器如何測量字體像素)
  • 可以在所有現代瀏覽器中使用Zoomable

EM

Ems非常適合製作靈活的網格和測量。 例如,如果在ems中指定了容器寬度,我可以使用一個聲明按比例調整容器及其內容在我的媒體查詢中的大小。

  • 響應CSS級聯
  • 相對於容器字體大小
  • 可以在所有現代瀏覽器中使用Zoomable

在此示例中,調整字體大小也會按比例調整其容器大小。

h1.title {
  font-size: 2em;
  width: 20em;
  background-color: #baff1e;
}

@media (min-width: 400px) {
  h1 {
    font-size: 2.5em
  }
}

REM

我實際上並沒有太多使用rem ,但我可以看到為什麼很多人喜歡它。 你有一個相對單位的力量,但你不必處理你投入CSS級聯時可能發生的瘋狂的事情。

根據瀏覽器的基本字體大小來調整大小看起來像是Web標準的事情,因為那時你允許瀏覽器的最佳基本字體大小可能不是16px。 但在實踐中,它的另一種方式是有效的。 從我所看到的,瀏覽器使用16px作為基本字體大小,因為這是每個人都期望的,並且將CSS測量的實際大小設置為在瀏覽器中看起來不錯。

  • 獨立於CSS級聯
  • 相對於基本字體大小
  • 可以在所有現代瀏覽器中使用Zoomable

關於62.5%技術的說明

這已經有很長一段時間了,現在我不知道有什麼理由不使用它。 2007年有一篇關於A List Apart的文章 ,他們做了一些測試,發現當基本字體聲明為100%且文本大小為em時,瀏覽器的字體大小更可靠。 但是,如果列出的任何瀏覽器約束確實相關,我會感到驚訝。 我仍然很難將基本字體大小設置為10px ,但這可能只是個人偏好。

更新

在做了一些測試後,我正在改變我使用像素進行媒體查詢的做法。 我現在推薦em

  1. 用戶確實更改了基本字體大小。 Mozilla支持網絡上的一個主題是“如何增加瀏覽器默認字體大小?” 有超過5,000意見。 類似的線程超過15,000。 另一項研究發現,一定比例的用戶(0.3%)的默認字體大小小於或大於“中等”。 用戶實際更改它的頻率似乎無關緊要(參見之前的SO答案 )。 如果有人這樣做,可能值得支持他們。

  2. Ems可能更適合未來發展。 它們適用於最佳默認字體大小不是 16px的任何設備(以及那些)。

  3. 最讓我信服的是看它在行動中。 這是一個codepen演示。 請注意,瀏覽器的縮放可能沒什麼區別(我在Chrome中測試過)。 但是,如果您實際進入瀏覽器的設置並將默認字體大小從“中”更改為其他內容,則寬度會偏離。 在我看來,這是不可接受的。

現在已經fixed了WebKit 頁面縮放錯誤 ,使用基於em的媒體查詢而不是基於像素的媒體查詢的主要原因是什麼?

賞金

我正在為我的問題添加賞金,​​因為許多著名的CSS frameworks and web developers使用基於em的媒體查詢,我相信必須有充分的理由這樣做。

我所知道的一個優點是,如果用戶在瀏覽器中更改默認字體大小,內容將以類似於fixed解決的問題的方式developers 。 是否有任何數據顯示人們確實更改了默認大小而不是縮放?

注意

為了使我的問題更集中,我刪除了兩個外圍項目。 原帖將為@nwalton的優秀answer添加視角,該answer解決了我所提出的所有三點。


使用基於EM的媒體查詢有一個主要原因
尊重用戶(基本)字體大小設置
沒有打破你的佈局!

你真的永遠不應該在像素中定義字體大小(也不要在元素寬度/高度上)!
讓用戶決定他喜歡看你網站的字體大小。

所以這是一個可訪問性的問題。

如果使用像素值,則必須假定某個(基本)字體大小,即“正常”16px。 但並非總是如此,這就是重點。 因此,如果用戶選擇了更小或更大(基本)的字體大小,您的佈局將會崩潰。

或者在桌面系統上,如果用戶使用瀏覽器的縮放功能,他將獲得一個水平滾動條(這是最不希望的)。

通過使用EMs等相關單位可以避免所有這些。 它們沒有任何缺點。

值得一提的是,實際上基本字體大小設置以及移動瀏覽器(在平板電腦和手機等觸摸設備上)的縮放功能與桌面版本相比有所不同。 對於移動瀏覽器版本,字體大小設置不像桌面瀏覽器那樣起重要作用。 但是,通過使用基於EM的媒體查詢,您再沒有做錯任何事。 而imho這是盡可能“未來證明”。

而且您也可以輕鬆使用“62.5%技術”。
請注意,新的“root em”字體大小取決於根元素(頁面的)字體大小,即html元素,而不是body元素。

在不破壞可訪問性的情況下使用“62.5%技術”:

html {
    font-size: 62.5%; /* with the standard base font size of 16px this will be equal to 10px */
}

body {
    font-size: 160%; /* 160% of 10px ~ 16px, understood by all browsers */
    font-size: 1.6rem; /* 1.6 * 10px ~ 16px, understood by all major browsers and IE9+ */
}

所以你可以使用rem就像它在px (除以10)的地方一樣,
但不會對用戶的設置造成任何傷害!

無論用戶選擇何種基本字體大小,字體比率始終保持不變。
還有你的佈局! ;-)

最後一句話:
始終使用min|max-width媒體查詢,而不是device-width ! 簡而言之,原因是您根據內容佈局和設置斷點,而不是任何設備的分辨率!

因此,通過為您的佈局和字體大小使用相對單位(如EMs ),您的設計真的是“響應”。 通過使用絕對單位(如PX ),它不是!







media-queries