フォントサイズおよびデバイス・ピクセル比

のは、私は16pxにに設定されているデフォルトのフォントサイズ（それはほとんどのブラウザでデフォルトですので、これは冗長でなければなりません）持っているとしましょう：簡潔にするためにフォントサイズおよびデバイス・ピクセル比

を、私のサイトは、サイズがいくつかのボックスが含まれています10em×10em。

 
body, html 
{ 
    font-size: 16px; 
} 
.box { 
    border: 1px green solid; 
    background-color:green; 
    width:10em; 
    height:10em; 
}

私のサイトはすでにEM値（36、62および85em）をターゲット特定のブレークポイントのためmin-widthメディアクエリと応答します。

私のサイトが行う唯一のことは、ボックスの幅と色を変更することです。

 
@media (min-width:36em) { 
    .box { 
    width: 36em; 
    border:1px red solid; 
    background-color:red; 
    } 
} 
@media (min-width:62em) { 
    .box { 
     width: 62em; 
     border:1px blue solid; 
     background-color:blue; 
    } 
} 
@media (min-width:85em) { 
    .box { 
     width: 85em; 
     border:1px orange solid; 
     background-color:orange; 
    } 
}

今度は、私はブラウザがデバイスの画素密度は、デフォルトで2dppxされていることを決定し、解像度1440×900で、いくつかのデバイスを持っているとしましょう。結果として、すべてが、はるかに大きく見えます。私はそれが好きではありません。

しかし、解決策は簡単でしょうか？ 2dppxのピクセル密度のために開始時にメディアクエリを追加するだけで、ピクセル数が2倍になるので、フォントサイズを半分に減らすだけです。これはうまくいくはずです。

私はフォントサイズを半分に変更してすべてを "em"するので、自動的にすべてのサイズを縮小します。

 
@media (min-resolution: 2dppx) { 
    body, html { 
     font-size: 50%; 
    } 
}

relevant jsFiddle

私はそれが...私は答えをグーグルしようとしただろうが、関連する何かを見つけることができませんでした、私はEMS、私はどのようにフォントサイズを誤解疑う思っただけでなく、私はそれが動作しません発見し、ピクセル密度が...

フォントサイズを50％縮小すると、フォントサイズが半減します。元のサイズは16pxですが、font-size：50％です。 font-size：8pxよりもはるかに小さいフォントになります。FirefoxとChromeでテストされています。誰もがなぜそれが分かっていますか？
font-size：8pxを設定すると、 2dppxのメディアクエリでは、最小幅：36em、62em、および85emのメディアクエリは、少なくとも私がFirefoxのlayout.css.devPixelsPerPxを変更したときに予想したようにトリガしません。メディアクエリの最小幅は、dppxメディアクエリで変更されても、font-sizeがまだ16pxの場合と同じように動作します。 FirefoxとChromeでテスト済みです。誰もがなぜそれが分かっていますか？

UPDATE

メディアクエリを1dppxコンテキストにロードされているように、あなたが「EM」を使用している場合、それは問題ではない見える、彼らが負荷と、このような最小幅されているような値にキャッシュされているようです最初の値に固定され、別のメディアクエリで基本フォントサイズを変更しても、他のクエリは更新されません。

私が考えることのできる唯一の解決策は、すべてのメディアクエリを掛けることです。 1 dppxコンテキストのpx値に対する1つのメディアクエリと、2 dppxコンテキスト（最初の値の50％）におけるpx値の別のメディアクエリ。コメント欄で氏リスターへ

出典

2017-08-25 Mirek

あなたは 'フォントサイズのことを思うのはなぜフォントサイズ：16px'？ _parentフォントのサイズ_の半分です。 –

とにかく、より高いdppxでフォントサイズを小さくするのは良い考えではありません。これらの画面は、ハードウェアドットが小さいため、dppxが高くなります。また、2dppx画面でフォントサイズを16ハードウェアドットに設定すると、標準（96dpi）モニタでは8ピクセルと同じサイズになりますが、これは実際には小さすぎます。（それは私たちにはとにかく昔の人です。） –

親は明示的に16px（body、html）に設定されているので、50％は8pxになるはずです。そして、私は、特定の解像度のためにサイズを縮小するつもりで、理由がなくてもより高い画素密度を使用し、結果として生じるページがより大きいデバイスをターゲットにするつもりです。私は特定の解像度で特定の濃度を目標にする以外に、この問題を解決する方法を他の方法で知らない。 – Mirek

おかげで、私は、このことが判明：

 
@media (min-resolution: 2dppx) { 
    body, html { 
     font-size: 50%; 
    } 
}

が...私が何を意図したものではありません。50％ルールは<html>タグで、<body>タグでは有効です。結果のフォントサイズは本体では8pxではなく、4pxです。これはhtmlの50％が8pxで、ネストされたbodyタグの50％が4pxになるためです。

 
@media (min-resolution: 2dppx) { 
    html { 
     font-size: 50%; 
    } 
}

フォントサイズの問題が解決されています。私が何を意図したもの

は、このでした。

メディアクエリの場合：@mediaクエリのサイズはピクセル密度を無視しますが、CSSルール本体のサイズはそれではないことがわかりました。私は「EM」のサイズとSASSを使用しているので、私は単純に、このミックスイン（2dppxとの一例）を持つすべての@mediaクエリを置き換えることができます：50％が ``の半分である：

 
@mixin media-min-width($min-width) { 
    @media(min-width:$min-width), (min-width: $min-width/2) and (min-resolution: 2dppx) { 
     @content; 
    } 
}

出典

2017-08-29 09:43:44 Mirek

フォントサイズおよびデバイス・ピクセル比

答えて

関連する問題