全部ではなく、1つのサムネイルを非表示にする必要があります

Question

サムネイルが5つあり、そのうち1つをモバイルデバイスに表示しないようにしたいと思います。 cssのメディアクエリを使用して1つのサムネイルを隠すことは可能ですか？

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

Answer 1

はい可能です。クラスを定義し、それをメディアクエリの中に入れる必要があります。

@media (max-width: 767px){ 
    .hide-mobile{ 
    display: none; 
    } 
} 

このクラスを非表示にする画像に割り当てます。

Answer 2

このような何かを行うことははい、その非常に簡単にこれを行うには非常に単純なことですので、私はいくつかのCSS講座をやってお勧めしますが、以下にこれをやって行くことができる多くの方法があります

HTML一例であり、

<div class="thumbnails"> 
    <img src="thumbnail1" class="thumb1"> 
    <img src="thumbnail2" class="thumb2"> 
    <img src="thumbnail3" class="thumb3"> 
    <img src="thumbnail4" class="thumb4"> 
    <img src="thumbnail5" class="thumb5"> 
</div> 

の上に表示し、次にあなたがする必要があるすべてはあなたのブレークポイントで

CSS

それを隠しているよう非表示にしようとしている要素は、独自のクラスを持っていることを確認してください

@media (max-width: "your width px"){ 
    .thumb5{ 
      display: none; 
     } 
} 

Answer 3

これは動作します。コードスニペットを実行してフルサイズに展開し、ブラウザのサイズを400pxより小さく変更します。

@media (max-width: 400px) { 
 
    .img3 {display:none;} 
 
}

<img class="img1" src="http://placehold.it/140x100" /> 
 
<img class="img2" src="http://placehold.it/140x100" /> 
 
<img class="img3" src="http://placehold.it/140x100" /> 
 
<img class="img4" src="http://placehold.it/140x100" /> 
 
<img class="img5" src="http://placehold.it/140x100" />