2

我正在寻找一种基于客户打开电子邮件的设备来显示/隐藏电子邮件通讯内容的方法。

我目前在 head 部分中有这段代码：

    @media only screen and (max-width: 480px) {
  #mobile { display: block; }  /* show it on small screens */
#normal { display: none; }   /* hide it elsewhere */
}

@media only screen and (min-width: 481px) {
  #mobile { display: none; }   /* hide it elsewhere */
  #normal { display: block; }  /* show it on large screens */
}

随着：

<div id="mobile">content</div> or <div id="normal">content1<div>

如果我将它用于网络，这很好用，我可以缩放我的浏览器窗口，内容会根据窗口的宽度出现/消失，但是一旦我通过我们的电子邮件系统发送测试，它就可以在移动设备上正常工作，但会崩溃在桌面 (Gmail) 上。

因为这是一封电子邮件，所以我不能使用 javascript，所以它都需要是 html/css。

我做错了什么或遗漏了什么？

4

1 回答 1

1

我感觉到你的痛苦。在 html 电子邮件时事通讯中显示和隐藏内容让我很困惑！

/* Hide on Desktop */

.hide-desktop { 
    /* non-gmail */
    display: none; 

    /* gmail */
    font-size: 0; 
    max-height: 0; 
    line-height: 0; 

    /* outlook */
    mso-hide: all;

    /* optional, required only if you're using padding */
    padding: 0; 

}
@media (max-width: 480px) {
    .hide-desktop {
        display: block !important;
        font-size: 12px !important;
        max-height: none !important;
        line-height: 1.5 !important;
    }
}


/* Hide on Mobile */

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

注意：不要忘记内联.hide-desktop规则，即在媒体查询之外。

因此，使用媒体查询和一些技巧，我们可以为桌面做一个看涨的 hide all，然后撤消它的媒体查询。相反，由于移动客户端对媒体查询有很好的支持，我们可以单独使用媒体查询隐藏移动内容。离群值 gmail 只是获得桌面视图——这很不幸，但仍然可以使用。

于 2015-03-26T22:18:15.183 回答