画面幅に応じて異なるコンテンツを表示する

Question

1 つの要素に対して、画面の幅に基づいて 2 つの異なるテキストがあります。画面幅が400px以下の場合にnarrowを表示したいと考えています。画面幅が400pxより大きい場合にlargeを表示したい。

コードは次のとおりです: https://jsbin.com/qagetoseva/edit?html,css,output

しかし問題は、幅が 400px の場合、このコードでは何も表示されないことです。変更方法を知っている人はいますか?

リーリー ああああ

Answer 1

親愛なる友人、CSS メディア クエリに問題があります。

リーリー

}

リーリー

タブレットのサイズに合わせて、2 番目のメディア クエリを 1024px に変更しました。大きな画面用に新しいメディア クエリを作成する必要があります (例: min-width 1025px

)