CSS斷點和em單位

當我試圖用em單位媒體查詢我注意到，該單元是基於瀏覽器的默認字體大小，而不是在html根。
它打雜的時候我會設置爲20em元素的寬度時，斷點爲min-width: 20em。這種情況下的兩個單位不相等，因爲元素的20em基於html font-size，媒體查詢基於默認的瀏覽器字體大小。CSS斷點和em單位

是否有一種方法可以使用em單元實現相同的尺寸，而不需要爲斷點定義額外的單獨變量（@bp-size: 16.250em）？

html { 
 
    font-size: 0.813em; // 13px (assume default browser font-size: 16px) 
 
} 
 

 
.box { 
 
    width: 1em;   // 13px x 13px 
 
    height: 1em; 
 
    background-color: #000; 
 
    
 

 
    // Problem 
 
    
 
    @size: 20em; 
 

 
    @media screen and (min-width: @size) {  // 320px (20 x 16px) why not 260px? 
 
    width: @size;       // 260px (20 x 13px) 
 
    background-color: #f00; 
 
    } 
 
}

<div class="box"></div>

來源

2017-01-31 rafr3

我問你這個問題後不久。我終於發現definitive answer來自深埋在Media Queries page深處的html神。在媒體查詢

相對單位是基於所述初始值，這意味着單元從未基於聲明的結果。例如，在HTML中，'em'單位相對於'font-size'的初始值。

不要緊，你在你的HTML設置，媒體查詢總是會在瀏覽器最初的字體大小屬性設置。

來源

2017-08-09 12:02:15 sansSpoon

這是非常有可能的 - 什麼你要找的是rem而非em：

@size: 20rem;

rem是相對於root元素，而em是相對的到當前元素。有關這方面的更多信息，請參閱W3和TutsPlus。

希望這會有所幫助！ :)

來源

2017-01-31 19:43:56

我剛剛檢查過，'rem'在這種情況下和'em'一樣。 http://codepen.io/anon/pen/ygvGdK BTW我知道'rem'和'em'之間的區別。 – rafr3

我不明白爲什麼我不可能使用一個變量同時定義斷點和元素，以及爲什麼斷點單元基於瀏覽器的設置。 – rafr3

由於提供你的榜樣，父母是''本身 - 無論是直接父和根源是相同的元素，這樣既'em'和'rem'將努力以同樣的方式（基於13像素）:) –

CSS斷點和em單位

回答

相關問題