12

remをcssの単位として使用する場合、Safari（PCとMacの両方）ではスケーリングは実際には機能しません。

http://jsfiddle.net/L25Pz/3/にある例

マークアップ：

<div>
    <img src="http://www.google.com/images/srpr/logo3w.png" />
    <p>Lorem ipsum dolor sit amet</p>
</div>

CSS：

html { font-size:62.5% }

div { background:url(http://www.google.com/images/srpr/logo3w.png); background-size:275px 95px; background-size:27.5rem 9.5rem; background-repeat:no-repeat; }
img { width:27.5rem; height:9.5rem; }
p { font-size:5rem; }

@media only screen and (max-width: 500px) {
    html { font-size:50%;} /* should render everything * 0.8 */
}

...ブラウザウィンドウが600pxより広い場合、すべてのブラウザで275px*95pxのサイズで画像をレンダリングします。また、メディアクエリをトリガーすると、画像と背景によって幅と高さが220px*76pxに調整されます。

ただし、Safariを使用すると、幅と高さは247px*75pxに設定されます。これは*0.8ではありません、それは何か他のものです...

一方、段落のフォントサイズは正しくレンダリングされます。クエリにフックすると40pxになります。

あなたが私に尋ねれば、非常に奇妙です。誰かが解決策を持っていますか？

4

2 に答える 2

23

-webkit-text-size-adjust次のように設定する必要がありnoneます。そうしないと、webkitはフォントサイズを読み取り可能なサイズに拡大します。

@media only screen and (max-width: 500px) {
    html { font-size:50%; -webkit-text-size-adjust:none; }  /* should render everything * 0.8 */  
}
于 2012-11-07T09:16:03.483 に答える
4

パーセンテージをピクセルごとに変更することで、この問題を解決しました

    @media (max-width: 96em) {
     html {
        font-size: 8px;
        }
     }

ブラウザは16pxの標準フォントサイズを使用します。適応にremを使用する場合、計算を簡単にするために、16pxの62.5％のフォントサイズを指定します。これは1em=10pxです。他の解像度に適応する場合、この値を比例的に変更します。たとえば、解像度が1280pxの場合、次のようになります。

1920/1280 = 1.5、62.5 / 1.5 = 41.667（％）。

1440pxで-62.5/（1920/1440）= 46.875（％）。

Safariを除くすべてのブラウザは、メディアクエリでfont-sizeがパーセンテージで指定されている場合を理解します。パーセンテージをピクセルに変換することで問題を解決しました。

1280：41,667％* 16px = 6.66672 px

1440：16 * 0,46875=7,5。

等々。

于 2018-11-29T22:36:01.600 に答える