css - デスクトップと電話の CSS で @media クエリを使用する

Question

ユーザーのブラウザーの幅に応じて異なる CSS スタイルが適用されるレスポンシブな Web サイトを開発しています。

選択された方法は、CSS メディア クエリを使用することでした。

私の問題はこれです:次のコードを使用すると

@media screen
and (min-width: 200px)
and (max-width: 800px)
{
    #example
    {
        background: purple;
    }
}

これは、PC のウィンドウのサイズを変更すると機能しますが、解像度が制限内にある電話では認識されません。

おそらくもっと奇妙なことに、次のコードを使用すると

@media screen
and (min-device-width: 200px)
and (max-device-width: 800px)
{
    #example
    {
        background: purple;
    }
}

これには逆の効果があります。電話では表示されますが、PC では表示されません。

私が読んだ限り、次の行に沿った何かが有効である「OR」演算子の範囲はありません

@media screen
and (
        ((min-width: 200px) and (max-width: 800px))

        | / || / OR

        ((min-device-width: 200px) and (max-device-width: 800px))
    )
{
    #example
    {
        background: purple;
    }
}

私の質問はこれです: デスクトップと電話の両方で同時にレスポンシブ CSS をテストする方法はありますか?

私は非常に多くの組み合わせを試しました:@media only screen電話で Android、Firefox、および Chrome ブラウザを使用しましたが、結果は常に同じです。

現時点でこれを行う唯一の方法は、デスクトップ用と電話用の 2 つの個別のスタイルシートを作成することですが、これはブラウザーで変更を表示するたびに 2 つのスタイルシートを更新することを意味し、これは非現実的でカウンターです。レスポンシブの考え方。

私はターゲットの使用を調べましたorientation: landscape/portraitが、私が理解できる限り、これも 2 セットの CSS を記述する必要があります。

最後に考慮すべきことは、Web サイトが現在純粋な CSS を使用していることです。したがって、現時点では、JavaScript、ユーザーエージェントの決定、サーバー側のスクリプトはありません。

これは可能でなければならないので、どんな洞察も高く評価されます。誰かが同じ問題を抱えていて、私を啓発していると確信しています。