wordpress - レスポンシブウェブデザインレイアウトで画像を非表示にします。

Question

携帯電話やタブレットから見たときだけ画像を非表示にしたい。

これどうやってするの？

Answer 1

imgsで「display：none」を使用すると、httpリクエストが無駄になっているため、推奨されない画像がダウンロードされます（これは、ブラウザのインス​​ペクタのネットワークタブを確認することで確認できます[右クリック、Chromeで要素を検査]。ページを更新すると、ダウンロードされている各アセットとダウンロードにかかる時間が表示されます。）
むしろ、divの背景画像としてロードしたくない特定の画像を作成することができます。
次に、あなたがする必要があるのは：

@media (max-width: x) {
    .rwd-img {
        background-image: none;
        }

もちろん、CSSでdivの画像の高さと幅を定義する必要がありますが、それはユーザーエクスペリエンスを犠牲にするよりも優れたオプションです。:)

関心のあるリンク：http：
//css-tricks.com/on-sensitive-images/
http://mattstow.com/response-and-retina-content-images-redux.html

Answer 2

メディアクエリを使用する必要があります。例：

@media (max-width: 979px) {
   .img { 
      display: none;
   }
}

また、レスポンシブユーティリティクラスを提供するBootstrapなどのフレームワークも調べる必要があります。

Answer 3

メディアクエリでカスケードスタイルシートを使用すると、画面幅が640ピクセル未満の場合のように、ビューアの画面解像度が特定の値よりも低い場合に画像を非表示にできます。

@media screen and (max-width: 640px) {

    .my-image {
        display: none;
    }

}