是否可以使用EM覆蓋媒體查詢中瀏覽器的默認字體大小？

Question

許多人認為1em = 16px 。 這是不正確的 ， 1em = value of your browser font-size which is most of the time 16px 。 雖然更改瀏覽器默認字體大小並不常見，但更改設置仍然很容易。

在這種情況下，從HTML元素的角度來看，覆蓋em值仍然很容易，因為它使用了top元素的font-size。 例如：

html {
     font-size: 20px; 
}

這種簡單的樣式將層疊到文檔的其余部分，而1em實際上將變為20px 。

問題是，將CSS與media queries一起使用時， em的值似乎停留在瀏覽器樣式級別而不是頂級元素。 例如：

@media screen and (min-width: 2em) {
    ...some style...
}

如果考慮上一個示例，該示例具有20px的 HTML覆蓋，則可以預期該上下文中的2em指向頂級元素，其值為40px 。 但事實並非如此，它將是2 * browser default font-size （例如16px，所以36px）。 更糟糕的是，如果將瀏覽器的字體大小自定義為24px ，則2em實際上將具有48px的值。

有辦法解決嗎？ 主要問題是，如果我們無法覆蓋瀏覽器的默認字體大小，則很難預測媒體查詢的樣式。 此值變得不可預測，這意味着您的樣式也會如此。

我可以想到一種使用JavaScript獲取瀏覽器默認字體大小的復雜方法，但是我不禁懷疑為什么媒體查詢不使用top元素的字體大小而不是瀏覽器的默認字體大小。 我也希望有一種更好的方法來處理此問題，而無需復雜的JavaScript。

總而言之，我正在尋找：

1. 一種使用媒體查詢時覆蓋默認瀏覽器字體大小值的方法。
2. 一種獲取默認瀏覽器字體大小的簡單方法。

Answer 1

我可以想到一種使用JavaScript獲取瀏覽器默認字體大小的復雜方法，但是我不禁懷疑為什么媒體查詢不使用top元素的字體大小而不是瀏覽器的默認字體大小。

顧名思義，媒體查詢旨在查詢用戶代理所代表的有關媒體的信息。 因此，瀏覽器，而不是根元素。 如果您希望查詢基於根元素，那么您正在尋找元素查詢，那么今天在生產中就沒有任何形式的東西。

總而言之，我正在尋找：

1. 一種使用媒體查詢時覆蓋默認瀏覽器字體大小值的方法。

那將需要更改font-size: medium對應的值（ 如果在ems中指定了文檔的字體大小，請參閱“ em”是什么？ ），這是不可能的。

2. 一種獲取默認瀏覽器字體大小的簡單方法。

字體大小的關鍵字值將計算為其相應的絕對長度 。 從理論上講，您可以使用JavaScript獲取具有指定font-size: medium值的任何元素的計算出的字體大小（在這種情況下，與CSS的“計算值”定義一致），然后將該值放入您的媒體查詢，但這需要使用JavaScript window.matchMedia()而不是CSS @media來實現所有媒體查詢。 這簡直就是簡單。

Answer 2

您可以使用rem單位代替em單位。 Em是它的父元素。 我的意思是，如果您設置基本字體大小：20px，並且其中兩個ul設置為一個，則您將父ul字體大小設置為2em，將子ul字體大小設置為2em，而不是父ul設置了字體大小40px，但是子ul字體大小為80px。 因為em跟隨他的父元素。 見下面的代碼

 html { font-size: 20px; } ul { font-size: 2em; } ul ul { font-size: 2em; } 

 <ul>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam obcaecati amet, labore dignissimos itaque vero odio ipsa repellat, eum natus qui ipsum quidem. Quisquam voluptates, fugiat doloribus ad aperiam corrupti! <ul>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim deleniti labore minus laborum nobis impedit excepturi nostrum temporibus ipsam rerum, cupiditate ex veniam, delectus odio earum a id dolor expedita? </ul> </ul> 

但是，如果您使用rem unit，則不會遇到此類問題。 見下面的代碼

 html { font-size: 20px; } ul { font-size: 2rem; } ul ul { font-size: 2rem; } 

 <ul>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam obcaecati amet, labore dignissimos itaque vero odio ipsa repellat, eum natus qui ipsum quidem. Quisquam voluptates, fugiat doloribus ad aperiam corrupti! <ul>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim deleniti labore minus laborum nobis impedit excepturi nostrum temporibus ipsam rerum, cupiditate ex veniam, delectus odio earum a id dolor expedita? </ul> </ul> 

希望對您有幫助。 媒體查詢也可以正常工作。