デスクトップブラウザと携帯電話ブラウザの両方で反応するサイトが多数ありますが、サイトで作業しています。メディアクエリ - モバイル対デスクトップブラウザ
/* Normal styles go here */
@media screen and (min-device-width:321px)
{
/* Styles */
}
@media screen and (min-width:701px)
{
/* Styles */
}
@media screen and (min-width:1025px)
{
/* Styles */
}
@media screen and (min-width:2049px)
{
/* Styles */
}
ただし、私のスタイルシートはデスクトップブラウザでのみ動作するようです。 （AndroidのFirefoxとSony Xperia RayのデフォルトのAndroidブラウザでテスト済み）
ヒックスのデザインサイトのルールは鉱山と非常に似ていますが、minとmaxを使用していますが、私にとってはうまくいきませんモバイルブラウザとデスクトップブラウザの両方（私はメディアのクエリをもっと最適化する計画をしています。私は、今のところ彼らが望むように、基本的な機能を果たそうとしています）。
私はMAX-デバイス幅の代わりに、最大幅を使用する場合、それは携帯のブラウザで反応するようになりますが、デスクトップではないのブラウザ...
私は問題を回避するために、次の次のことを試してみました：
@media screen and (max-width:480px), screen and (max-device-width:480px)
{
/* Styles */
}
も：私は、FirefoxのWeb Developerツールバーはそれについて不平を言うように、これらのどちらかが正しいとは思わないしかし
@media screen and (max-width:480px), and (max-device-width:480px)
{
/* Styles */
}
。私は上記のルールにいくつかのバリエーションを試しましたが、まだそれを働かせることはできません。
max-widthはビューポートの幅（ブラウザウィンドウの幅など）を読み取り、max-device-widthはサイトを表示するために使用している画面の実際の幅を読み取ります。 - なぜmax-widthがモバイルのブラウザの幅を読み取っていないように見えるのですか？
ここではメディアのクエリに関する何かが分かりにくいかもしれないと思います...私のサイトをデスクトップとモバイルブラウザに対応させたいのであれば、私はすべてのメディアをコピーする必要がありますクエリを 'screen and（max-width）'から 'screen and（max-device-width）'またはその逆に変更するだけです。
（max-width）ルールと（max-device-width）ルールを組み合わせるにはどうしたらいいですか？これはどのようにして実現できますか？ （：480PX最大幅）しかし、それは唯一の@media画面と（MAX-デバイス幅を思わ：私は@media画面とを使用しています
：あなたは、むしろ上記のすべてを読みたくない場合
480PX ）は携帯電話で動作します。どのようにしてこれらのルールを組み合わせて、モバイルとデスクトップのブラウザでレスポンシブなデザインを実現できますか？