为什么我的媒体查询断点不触发这张图片？

Question

我将媒体查询设置为在小于 480 像素的屏幕上显示不同的图像，但图像在断点处没有变化。 Here is a jsfiddle for the whole email.媒体查询如下。

@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

将 .hero-image .top-image 更改为 .hero-image.top-image。在 class 名称之间使用 space，您正在寻找具有 class .top-image 的元素，但其父元素具有 class .hero-image.

它在技术上是可行的，但仍然不是您所期望的，因为原始图像是在 img src 属性中设置的，这将隐藏您拥有的任何背景图像。

为什么我的媒体查询断点不触发这张图片？

Why aren't my media query break points triggering for this image?

css

responsive-design

media-queries

breakpoints