CSSメディアクエリ

Question

私は携帯電話で使用するために自分のタブレットWebアプリケーションを適応しようとしています。 Media Queryの機能は完璧だと私の最初のテストはこれを支持しています。私が持っている質問は、携帯電話やタブレットでは、縦向きから横向きに（デバイスの回転時に）向きを変え、最大幅は何を参照するのでしょうか？

言い換えれば、より大きいAndroidの携帯電話は480x800の線に沿った解像度を持ち、iPhone4は640x960の解像度を有し、オリジナルのブラックベリートーチは360x480の解像度を有する。デバイスがポートレートモードで保持されている場合、これらはすべて解像度（W×H）なので、幅はそれぞれ400,640,360です。ただし、デバイスを横向きに回転させると、高さは表示目的の幅になります。そのため、横幅の有効幅はそれぞれ800,960,480になり、800と960の幅はタブレットの横幅と重なり、表示が乱れます。

ですから、幅は常に幅ですか？つまり、デバイスがディメンションを報告するとき、幅の値は常にCSSの目的のために同じに保たれますか、デバイスが横向きに回転するときに幅の値が変化しますか？

ありがとうございました。

Answer 1

表示されているページの幅も変化しているため、デバイスを反転すると幅の値が変化します。

あなたは、デバイスは、風景やポートレートモードで使用されているかどうかを照会したい場合は、代わりに配向性を使用することができます。

@media screen and (orientation: portrait) { 
} 

ブラウザウィンドウの幅がより大きい場合これがチェックされます高さ（向き：風景は反対になります）。最良の結果を得るには、テストを連鎖させるために 'and'演算子を使用して、多くのMQプロパティーの組み合わせを使用する必要があります。すなわち：

@media screen and (orientation: landscape) and (max-width: 960px) { 
} 

MQのプロパティの完全なリストはhere可能です。

Answer 2

CSSの値は、携帯電話で表示されているかどうかに基づいて変更されます。だからあなたはあなたが望むものをターゲットにするためにCSSスタイルを定義するときに特定しなければなりません。

@media（最小幅：700px）と（方向：横）メディアクエリの詳細な理解のために{

}

が訪問：http://letsdopractice.com/css-media-queries/

Answer 3

メディアクエリは、スタイルを定義するために使用されています異なる画面サイズの場合私は、メディアの問い合わせに関する非常に基本的なことについてお話します。 CSSメディアクエリの構文は次のとおりです。メディアクエリ構文toturialの詳細については

@media not|only mediatype and (media feature) { 
CSS-Code; 
} 

This Site