CSSブレークポイントとemユニット

Question

emユニットをメディアクエリで使用しようとしたとき、ユニットがブラウザのデフォルトフォントサイズに基づいており、ルートはhtmlではないことがわかりました。
ブレークポイントがmin-width: 20emの場合、要素幅が20emに設定されています。要素の20emはhtml font-sizeに基づいており、メディアクエリはデフォルトのブラウザのフォントサイズに基づいているため、この場合の両方のユニットは同じではありません。

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>

Answer 1

私はあなたの後にこの質問をしました。私はついにMedia Queries pageに深く埋め込まれたhtml神からdefinitive answerを見つけました。 メディアクエリで

相対単位は単位が宣言の結果に基づいてされることはありませんことを意味し、初期値に基づいています。たとえば、HTMLでは、 'em'単位は 'font-size'の初期値からの相対値です。

それはあなたがあなたのhtmlに設定されたかは重要ではありません、メディアクエリは、常にブラウザの初期フォントサイズ属性に設定されます。

Answer 2

これは非常に可能性がある - あなたが探しているのはremいうよりemです：emは相対的なものであるのに対し、

@size: 20rem; 

remは、root要素に相対的です現在の要素に追加します。詳細については、W3およびTutsPlusを参照してください。

希望すると便利です。 :)