html - 如何让媒体查询/css 在 html 电子邮件中工作-6ren

html - 如何让媒体查询/css 在 html 电子邮件中工作

转载作者：行者123 更新时间：2023-11-28 00:23:56

我在获取正确显示的 html 电子邮件时遇到问题。 html 包含媒体查询以使其响应不同大小的设备......它在浏览器中正确显示但是当作为电子邮件发送时，css 似乎无法正常工作以调整图标位置。

我已经尝试缩小 css，使 css !important 等，但没有任何效果。在 Gmail 中检查电子邮件的 html 后，我注意到类名已被 Google 更改，并且没有应用任何规则。不确定为什么会发生这种情况或如何解决它。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <meta name=viewport content="width=device-width, initial-scale=1">
        <title>Testing Testing 123</title>
        <style type="text/css">
            #bodyBg {
                margin: 0px;
                padding: 0px;
                background-color: white;
            }


            @media only screen 
            and (max-device-width: 325px)
            and (min-device-height: 500px)
            and (max-device-height: 580px){
                .helpfulIcons {
                    height:62px; 
                    width: 66px;
                }
                #helpfulIconTable {
                    position: relative; 
                    bottom: 150px;
                    width:100%
                }
                #socialIconTable {
                    position: relative; 
                    bottom: 550px; 
                    width: 90%;
                    left: -8px;
                    margin-left:auto; 
                    margin-right:auto;                    
                }
                .socialIcons {
                    height: 79.36px; 
                    width: 84.48px; 
                }
                socialCells {
                    padding-right: 5px; 
                    width:25%; 
                    text-align: center;
                }
            }


            @media only screen 
            and (min-device-width: 326px)
            and (max-device-width: 364px) {
                .helpfulIcons {
                    height:62px; 
                    width: 66px;
                }
                #helpfulIconTable {
                    position: relative; 
                    bottom: 150px;
                    width:100%
                }
                #socialIconTable {
                    position: relative; 
                    bottom: 550px; 
                    width: 90%;
                    left: -8px;
                    margin-left:auto; 
                    margin-right:auto;                    
                }
                .socialIcons {
                    height: 79.36px; 
                    width: 84.48px; 
                }
                socialCells {
                    padding-right: 5px; 
                    width:25%; 
                    text-align: center;
                }
            }


            @media only screen 
            and (min-device-width: 365px)
            and (max-device-width: 499px)
            and (max-device-height: 700px){
                .helpfulIcons {
                    height:62px; 
                    width: 66px;
                }
                #helpfulIconTable {
                    position: relative; 
                    bottom: 150px; 
                    width:100%
                }
                #socialIconTable {
                    position: relative; 
                    bottom: 550px; 
                    width: 100%;
                    left: -8px;

                }
                .socialIcons {
                    height: 79.36px; 
                    width: 84.48px; 
                }
                socialCells {
                    padding-right: 5px; 
                    width:25%; 
                    text-align: center;
                }
            }


            @media only screen 
            and (min-device-width: 365px)
            and (max-device-width: 499px)
            and (min-device-height: 701px){
                .helpfulIcons {
                    height:124px; 
                    width: 132px;
                }
                #helpfulIconTable {
                    position: relative; 
                    bottom: 160px; 
                    width:100%
                }
                #socialIconTable {
                    position: relative; 
                    bottom: 850px; 
                    width: 100%;
                    left: -8px;

                }
                .socialIcons {
                    height:124px; 
                    width: 132px; 
                }
                socialCells {
                    padding-right: 5px; 
                    width:25%; 
                    text-align: center;
                }
            }

            @media only screen 
            and (min-device-width: 400px)
            and (max-device-width: 450px)
            and (min-device-height: 790px)
            and (max-device-height: 850px){
                .helpfulIcons {
                    height:248px; 
                    width: 264px;
                }
                #helpfulIconTable {
                    position: relative; 
                    bottom: 300px; 
                    width:100%
                }
                #socialIconTable {
                    position: relative; 
                    bottom: 1620px; 
                    width: 90%;
                    left: -8px;
                    margin-left:auto; 
                    margin-right:auto;                    
                }
                .socialIcons {
                    height: 248px; 
                    width: 264px; 
                }
                socialCells {
                    padding-right: 5px; 
                    width:25%; 
                    text-align: center;
                }
            }



            @media only screen 
            and (min-device-width: 400px)
            and (max-device-width: 450px)
            and (min-device-height: 700px)
            and (max-device-height: 780px){                
                .helpfulIcons {
                    height: 75.39px; 
                    width: 80.256px; 
                }
                #helpfulIconTable {
                    position: relative; 
                    bottom: 165px; 
                    width:100%                }
                #socialIconTable {
                    position: relative; 
                    bottom: 590px; 
                    width: 90%;
                    left: -8px;
                    margin-left:auto; 
                    margin-right:auto;                    
                }
                .socialIcons {
                    height: 79.36px; 
                    width: 84.48px; 
                }
                socialCells {
                    padding-right: 5px; 
                    width:25%; 
                    text-align: center;
                }
            }



            @media only screen 
            and (min-device-width: 700px)
            and (max-device-width: 900px) {
                .helpfulIcons {
                    height:111.6px; 
                    width: 118.8px;
                }
                #helpfulIconTable {
                    position: relative; 
                    bottom: 170px; 
                    width: 70%;
                    margin-left: auto;
                    margin-right: auto;
                }
                #socialIconTable {
                    position: relative; 
                    bottom: 705px; 
                    width: 40%;
                    left: -8px;

                }
                .socialIcons {
                    height:99.2px; 
                    width: 105.6px; 
                }
                socialCells {
                    padding-right: 5px; 
                    width:25%; 
                    text-align: center;
                }
            }

            @media only screen 
            and (min-device-width: 901px) {
                .helpfulIcons {
                    height:173.6px; 
                    width: 184.8px;
                }
                #helpfulIconTable {
                    position: relative; 
                    bottom: 230px; 
                    width: 90%;
                    margin-left: auto;
                    margin-right: auto;
                }
                #socialIconTable {
                    position: relative; 
                    bottom: 930px; 
                    width: 40%;

                }
                .socialIcons {
                    height: 124px; 
                    width: 132px; 
                }
                .socialCells {
                    padding-right: 10px; 
                    width:25%; 
                    text-align: center;
                }
            }

        </style>
    </head>
    <body id="bodyBg">
        <!--[if gte MSO 9]>
        <table width="411"><tr><td>
        <![endif]-->
        <table id="bgTable" style="width:100%">
            <tr>
                <td>
                    <img src="http://kingtaxsavannah.com/tax-prep/images/phone/bg_411x823.jpg" alt="king tax get social" style="width:100%" />
                    <table id="helpfulIconTable">
                        <tr>
                            <td style="padding-left: 20px; padding-right: 20px; width:33.33%; text-align: center;"><a href="https://sa.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp" target="_blank"><img alt="IRS Where's My Refund" class="helpfulIcons" src="http://kingtaxsavannah.com/tax-prep/images/phone/icons/irs_icon.png" /></a></td>
                            <td style="padding-right: 20px; width:33.33%; text-align: center;"><a href="https://dor.georgia.gov/wheres-my-refund" target="_blank"><img alt="GA Where's My Refund" class="helpfulIcons" src="http://kingtaxsavannah.com/tax-prep/images/phone/icons/ga_icon.png" /></a></td>
                            <td style="padding-right: 20px; width:33.33%; text-align: center;"><a href="https://mydorway.dor.sc.gov/_/" target="_blank"><img alt="SC Where's My Refund" class="helpfulIcons" src="http://kingtaxsavannah.com/tax-prep/images/phone/icons/sc_icon.png" /></a></td>
                        </tr>                        
                    </table>
                    <table id="socialIconTable">
                        <tr>
                            <td class="socialCells" style="padding-left: 20px;"><a href="https://www.facebook.com/kingtaxsavannah" target="_blank"><img alt="Facebook" class="socialIcons" src="http://kingtaxsavannah.com/tax-prep/images/phone/icons/facebook.png" /></a></td>
                            <td class="socialCells"><a href="https://www.instagram.com/kingtaxsavannah" target="_blank"><img alt="Instagram" class="socialIcons" src="http://kingtaxsavannah.com/tax-prep/images/phone/icons/instagram.png" /></a></td>
                            <td class="socialCells"><a href="https://twitter.com/KingTaxSavannah" target="_blank"><img alt="Twitter" class="socialIcons" src="http://kingtaxsavannah.com/tax-prep/images/phone/icons/linkedin.png" /></a></td>
                            <td class="socialCells"><a href="https://www.linkedin.com/company/kingtaxsavannah" target="_blank"><img alt="Linkedin" class="socialIcons" src="http://kingtaxsavannah.com/tax-prep/images/phone/icons/twitter.png" /></a></td>                            
                        </tr>                        
                    </table>
                </td>
            </tr>
        </table>
        <!--[if gte MSO 9]>
        </td></tr></table>
        <![endif]-->
    </body>
</html>

当我在 chrome 中打开 html 文件并在不同的移动设备设置下对其进行测试时，图标显示在我希望它们所在的确切位置。但是当我实际将 html 作为电子邮件发送时，所有图标都在主图像下方。

最佳答案

感谢您的评论。我以为 Gmail 不尊重我的任何 css，但事实证明，就像你说的，他们只是不允许定位。因此，我将背景图像设为表格的背景图像，并将图标放置在表格行的各个单元格内。我正在使用空表行进行定位。 css 通过媒体查询根据设备屏幕的大小调整空表行的高度。奇迹般有效!谢谢!

关于html - 如何让媒体查询/css 在 html 电子邮件中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54741207/

文章推荐： c++ - VS 2012 与 VS 2010 的互操作性

文章推荐： javascript - Jquery UI 日期选择器 : Implementing Alternate Format

文章推荐： c++ - 我将如何在 C++ 中实现动态绑定(bind)的这种使用？

文章推荐： html - 无法对齐和增加切换导航栏的宽度

电子邮件:具有互斥值的合法重复电子邮件标题键
在电子邮件中 Received: header 可以合法地多次出现，并且具有互斥的值... Received: three.example.com Received: two.example.co
如果出现错误，SAS 电子邮件
是否有任何代码/宏可以合并到我的 sas 程序中，一旦我的 sas 代码在运行时发生错误，它会立即给我发送电子邮件？另外，这封电子邮件是否可能包含发生的错误？最佳答案是的……也不是…… 这是可能
HTML 电子邮件 - 使图像适合表格单元格
我有一个包含三个 td 的表格，每个表格都需要包含图像。 td 的宽度和高度是固定的，但图像大小可以变化。目标是在不扭曲单元格或图像本身的情况下拟合图像。不能使用 background-image 属
iphone - 如何从应用程序发送短信/电子邮件
首先非常感谢大家过去提出的宝贵建议，我们正在创建一个应用程序，在某些事件中想要将电子邮件/短信发送到我们已经尝试过 openURL 调用的指定电话号码，但它会打开现有的内置iPhone 的电子邮件/短
Java 电子邮件 - 异常服务器不受信任
我正在使用 apache commons mail 发送电子邮件。不幸的是，我遇到了以下异常: org.apache.commons.mail.EmailException: Sending the
mercurial - 为一个项目设置一个多变的用户名/电子邮件？
我可以在我的 ~/.hgrc 文件中设置我常用的电子邮件地址，但是有没有办法为一个 hg 项目指定我想被称为不同的名称/电子邮件(类似到项目目录中的 git 的 .git/config 文件覆盖 ~/
php - 电子邮件——在电子邮件中换行的正确方法是什么？
$message = 'New user registration\n\n There is a new submission on the site and below are the detail
带有图像的 php 电子邮件()
使用 outlook 我可以发送在邮件正文中插入图像的电子邮件(不是作为附件)。我如何使用 PHP 中的 mail() 函数来做到这一点？最佳答案我会推荐 Swift Mailer: http:/
VBA 电子邮件，正文中粘贴有图表和文本
以下代码的目标是将所选图表粘贴到我的文本下方的电子邮件正文中。但是，它继续将其粘贴在我的文本上方。我该如何更改它以使其粘贴在下面？谢谢! Set OutApp = CreateObject("Outl
Java 正则表达式电子邮件
首先，我知道不建议使用正则表达式发送电子邮件，但我必须对此进行测试。我有这个正则表达式: \b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b 在 Java 中，我这样
Python 电子邮件？最简单的方法？
如何在没有任何第三方程序的情况下从 Python 发送电子邮件？最佳答案使用Python email和 smtplib模块。示例:http://docs.python.org/library/em
新页面上的 php 电子邮件
我目前正在使用此代码在 html 表中显示 mysql 记录 "; . . echo ' '. $row["Email1"] . ' '; . . echo ""; }
HTML 电子邮件 - 为链接的一部分着色
在电子邮件中使用 HTML 时，是否可以仅将链接的一部分着色为特定颜色？我试过: red part of link normal part ...我知道如果我拆分链接是可能的，但我正在努力将它们保持
html 电子邮件 - 将元素向下移动页面？
我正在处理一封 html 电子邮件，我有一个非常简单的元素 (ul)，我想将它移到页面下方。我检查了campaign monitor's guide并且不支持负边距，或者 position: abs
HTML 电子邮件 - 使用背景图片
我使用表格创建了我的 HTML 电子邮件，该表格有一个背景图像，在大多数基于 Web 的电子邮件客户端中都能正常显示。我正在努力让背景图片显示在 Outlook 中。我最近的尝试，我尝试了以下操作
php - 在发送之前格式化文本区域(电子邮件)
我对 PHP/CSS 和一般编程还很陌生。我想改变文本区域中文本的格式，就像在这里所做的那样，例如，当为突出显示的文本添加标签“代码示例”时，它会缩进它，或者当将它设置为粗体时，它会加粗它。这样做
C++ 电子邮件/SMTP
嘿，你能推荐我哪些 C++ 库或类可用于在 C++ 中通过 SMTP 发送电子邮件。我在 Windows 平台上。我需要一个支持附件和 SSL 连接的库。有哪些可用选项。我不打算实现我自己的 :) 问
HTML 电子邮件 - 按钮作为电子邮件中的表单
想知道是否可以在 HTML 电子邮件中包含一个表单。我要做的就是将图像输入提交到 Paypal 购买页面。我希望它直接进入 Paypal ，而无需先进入营销页面... 我会拥有 paypal 要求的完
HTML 电子邮件 - 不能限制宽度
我负责“ reshape ”我们的 IT 部门通信。我想用纯 HTML/CSS 来发送我们的电子邮件通知，以确保它的可移植性。下面是代码，它在 Outlook 中看起来完全符合我的要求，但是一旦将内
HTML 电子邮件，导航显示在移动设备的底部
我正在学习编写响应式电子邮件模板。目前我有:https://jsfiddle.net/q12yg2z6/

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何让媒体查询/css 在 html 电子邮件中工作