Neden medya sorgusu kırılma noktaları bu görüntü için tetikleniyor?

Question

* Tüm önerilen gönderileri inceledim. Özel sorumu cevaplayan birini görmedim. Yardımın için teşekkürler!

480 pikselden daha az ekranlar için farklı bir görüntüyü görüntülemek üzere bir ortam sorgusu ayarlıyorum ancak görüntü kırılma noktasında değişmiyor. Here is a jsfiddle for the whole email. Medya sorgusu aşağıda. .hero-image.top-image için

@media only screen and (max-width: 480px){ 
       /* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */ 
       body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */ 
       body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */ 

       *[class].social-cell { 
        width: 100% !important; 
       } 
       *[class].social-spacer { 
        height: 10px !important; 
       } 
       .hero-image .top-image { 
        background-image: url('http://i1045.photobucket.com/albums/b451/stonerootmedia/header-image%20-480px_zpsyffs7ced.png') !important} 
      } 

Answer 1

Değişim .hero-image .top-image. Sınıf isimleri arasındaki boşlukla, .top-image sınıfına sahip bir öğe arıyorsunuz, ancak ebeveyn öğesi .hero-image sınıfına sahip.

Teknik olarak çalışır, ancak beklediğiniz gibi olmayacaktır, çünkü orijinal görüntü imgsrc özniteliğinde ayarlanır ve sahip olduğunuz arka plan görüntüsünü gizler.