css - ページ要素の表示と非表示を切り替える CSS メディア クエリ。

Question

私はメディア クエリを使ったコーディングは初めてで、メディア クエリを使いすぎて (そしておそらく間違った方法で) 窮地に立たされたと思います。

私がやりたいことは、画面またはデバイスの幅が 481px より小さいときに、いくつかのページ要素を非表示にすることです。したがって、以下のスクリーンショットでは、右上隅に数行のテキストが表示される場合があります。

私の問題は、私が使用したメディア クエリに関係しています。(1) ページが 481px よりも小さくなったときにページ要素 (右上隅にある 2 行のテキスト) が消えない理由、または (2) より大きな画面に表示されない理由ページ要素を非表示にすることができたときの /device サイズ。

以下は、いくつかの問題を引き起こしていると思われる CSS コードの一部です。

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px){
   /* Hiding elements for this device * * * * * * * * * * * * * */
   /*
      .poweredBy{
         display: none;
      }
   */
 }

このコードをコメントアウトすると、ウィンドウ (デバイス?) の幅が約 320px になるまで、これらの 2 行のテキストは消えません。

CSS全体は次のとおりです。

/* Smartphones (portrait and landscape) ----------- */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
      .poweredBy{
          display: none;
      }
    }

/* Smartphones (landscape) ----------- */
    @media only screen and (min-width : 321px){
      .poweredBy{
          display: none;
      }
    }

/* Smartphones (portrait) ----------- */
    @media only screen and (max-width : 320px) {
        .poweredBy{
             display: none;
        }
    }



/* iPhone 4 ----------- */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {}

    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {}



/* iPads (portrait and landscape) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}

/* iPads (landscape) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}

/* iPads (portrait) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

/* iPad 3 ---------------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {}

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {}


/* Desktops and laptops ----------- */
    @media only screen and (min-width : 1224px) {}

/* 960px layouts ----------- */
    @media only screen and (min-width : 960px){}

/* Large screens ----------- */
    @media only screen and (min-width : 1824px) {}

下で GroundworkCSS を使用していますが、いくつかのメディア クエリを自分で追加しました。誰かが私を正しい方向に向けることができれば、私は最も感謝しています. ありがとう。