0

私はスージーを学んでいて、ブレークポイントで使用しようとしていて、奇妙なことに遭遇しています。

私は要旨を投稿しましたが、それはsassmeisterにもあります:

http://sassmeister.com/gist/7050948

https://gist.github.com/keithhayden/7050948

メディア レイアウト用にいくつかの変数を定義しました。

$susy-phone-wide:       24em 8       // 384px
$susy-tablet-portrait:  30em 12      // 480px to 600px
$susy-tablet-landscape: 37.5em 16    // 600px to 768px
$susy-computer:         48em 24      // 768px to ?

次に、ブレークポイントが有効になっている場所を確認するために、ブレークポイントごとに色が変わる div を用意しました。問題は、間違ったブレークポイントで色が変わっていることです。

  • 384px で緑色に変わり、480px ( -96px ) まで変化しません。
  • 480px で黄色に変わり、600px ( -120px ) まで変化しません。
  • 600px で赤くなり、750px まで変化しません ( -150px )
  • 768px で紫に変わり、960px ( -192px ) まで変化しません。

おそらく私の計算は、メディア レイアウトの em 値に当てはまらないでしょう。私は pxtoem.com を使用して em 値を計算しました。

実際の実用的な使用例は、モバイル デバイスでは上から下、幅 100% に配置されるボタンを追加することですが、非モバイル デバイスでは幅 auto になり、右から左に配置されます。

4

2 に答える 2

2

Chrome 26のUbuntuでチェックアウトしましたが、まったく問題ないようでした。しかし、その後、 で設定を少しいじってみましたchrome://settings。

Webコンテンツ

私はこれを設定しました：

  • フォントサイズ：中
  • ページのズーム: 100%

フォントをLargeに変更すると、ページは実際に体験したとおりに動作し始めました。

したがって、メディア クエリで相対単位を使用する場合、これは何があっても発生します。ブラウザーが単位のベースをオーバーライドする場合。メディア クエリだけを変更pxして、残りのデザインで相対単位を使用することができます...これがグリッド ソリューションにどのように影響するかはわかりません...しかし、この動作はなくなります。

ただし、ブラウザでフォントを大きく変更したり、ビューポートを拡大したりすると、小さいデバイスのエミュレートが開始されます...したがって、基本的には、元の動作は正しいです (実際のピクセルを見てはいけません)。そして、ズームイン（またはemベースを巨大に設定）すると、ボタンが上から下に配置されます...画面幅とフォント（em-base ）の比率がハンドヘルドデバイスの比率と似ているためです。

于 2013-10-19T14:18:31.063 に答える