个人中心
gpt4 book ai didi

html - 我的响应式 HTML 电子邮件没有响应

转载 作者：行者123 更新时间：2023-11-28 03:08:41 26 4
gpt4 key购买 nike

我根据从手册中获得的代码设置了一个简单的 2 列(在桌面屏幕上)HTML 电子邮件(当然我前段时间做过)。当我测试电子邮件时，我发现它在 Android 手机上显示正确(2 列显示根据需要更改为 1 列显示)，但是，当在 iPhone 5 中查看时(没有尝试过 iPhone 6 或更高版本)电子邮件不会响应，即 2 列显示不会按应有的方式更改为单列显示。

请参阅下面的电子邮件代码 CSS/HTML。我还在以下位置设置了一个 CodePen: https://codepen.io/Ben10/pen/GvGgZo

我想知道是否有人可以指出 CSS/HTML 代码有什么问题(或遗漏)。我该如何解决这个问题？我在网上查过，但我现在比以往任何时候都更加困惑。 HTML 电子邮件似乎是问题的雷区。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date Night Exclusive Picks Inlined Complete</title>

    <style>

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

    /*.wrapper{*/
    table[class="wrapper"]{
        max-width:680px !important;
        width:100% !important;      
    }

    td[class="deviceWidth"]{
        display:block !important;
        padding:0 !important;
        width:100% !important;
    }

    td[class="row"]{
        padding:15px 10px !important;
    }

    [class="deviceWidth"] p{
        font-size:16px !important;
    }

    a[class="bookLink"]{
        font-size:16px !important;
    }

    /*.resImg{*/
    img[class="resImage"]{
        height:auto !important;
        width:100% !important;
    }

    /*h1{*/
    [class="wrapper"] h1{
        font-size:24px !important;
    }

    [class="wrapper"] h2{
        margin-top:15px !important;
    }
} /* close media query max-width:680px */

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

        td[class="mobileBanner"]{
            background-image:url(http://www.nobledesktop.com/nl-date-
            night/img/header-mobile@2x.png) !important;
        background-repeat:no-repeat !important;
        background-position:center top !important;
        background-size:cover !important;
    }

    [class="mobileBanner"] img{
        display:none !important;
    }

    [class="mobileBanner"] a{
        display:block !important;
        padding-top:43.333% !important;
    }

    } /* close media query max-width:480px */


</style>


</head>
<body style="margin: 0;">

<table class="wrapper" align="center" border="0" cellpadding="0" 
cellspacing="0" width="680">
<tr>
    <td class="mobileBanner" align="center" width="100%">
        <p class="preheader" style="color: #ffffff;font-family: Helvetica, 
   Arial, sans-serif;font-size: 2px;line-height: 140%;margin-bottom: 
   0;margin-top: 0;display: none;">Punch-drunk in love? Go boxing with your 
    sweetheart. This and more great dates inside!</p>
        <a href="#" target="_blank"><img class="resImage" 
   src="http://www.nobledesktop.com/nl-date-night/img/header.png" 
  width="680" alt="Date Night" style="display: block;border: none;" moz-do-
  not-send="true"></a>

    </td>
</tr>

<tr>

    <td align="center" width="100%">

        <!-- NESTED TABLE -->

        <table align="center" border="0" cellpadding="0" cellspacing="0" 
  width="100%">
            <tr>
                <td class="mainContent" align="center" width="100%" 
  style="padding: 20px;border-bottom: 10px solid #e64a33;">
                    <h1 style="color: #69655c;font-family: Arial, Helvetica, 
  sans-serif;font-size: 40px;font-weight: bold;margin: 0;">This Week&#8217;s 
  Exclusive Picks</h1>

                    <!-- LISTING ONE -->

                    <table align="center" border="0" cellpadding="0" 
  cellspacing="0" width="100%">
                        <tr>
                            <td class="row" align="center" width="100%" 
  style="padding:20px;">

                                <table align="center" border="0" 
  cellpadding="0" cellspacing="0" width="100%">
                                    <tr>

                                        <!-- LEFT COLUMN -->

                                        <td class="deviceWidth" align="left" 
  width="50%" valign="top" style="padding-right:10px;">
                                            <a href="#" target="_blank"><img 
  class="resImage" src="http://www.nobledesktop.com/nl-date-
  night/img/couple-boxing@2x.jpg" width="290" alt="Couple Fighting" 
  style="display: block;border: none;" moz-do-not-send="true"></a>
                                        </td>

                                        <!-- RIGHT COLUMN -->

                                        <td class="deviceWidth" align="left" 
  width="50%" valign="top" style="padding-left:10px;">
                                            <h2 style="color: #696969;font-
  family: Helvetica, Arial, sans-serif;font-size: 16px;line-height: 
  140%;margin-top: 0;margin-bottom: 0;">OUT OF THE BOX DATES: BOXING 
 FOR&nbsp;TWO</h2>
  <p style="color: #363636;font-family: Helvetica, Arial, sans-serif;font-
  size: 12px;line-height: 140%;margin-bottom: 0;margin-top: 0;">If you 
  enjoyed our punny joke, you&#8217;ll love our selection of unique and out 
  of the box dates. They&#8217;re designed to ignite a budding relationship 
  or bring some new spark to an old flame. Dinner and drinks is 
  yesterday&#8217;s news, so get geared up and fight it out in the ring or 
  take it down a level with lazy river meditation. Expect to see a new and 
  exciting date added to the date book every week. <a class="bookLink" 
  href="#" target="_blank" style="color: #e74b34; font-size: 10px; font-
  weight: bold;">Book Now</a></p>
                                        </td>

                                    </tr>
                                </table>

                            </td>
                        </tr>
                    </table>

                    <!-- LISTING TWO -->

                    <table align="center" border="0" cellpadding="0" 
  cellspacing="0" width="100%">
                        <tr>
                            <td class="row" align="center" width="100%" 
  style="padding:20px;" bgcolor="#eeeeee">

                                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                    <tr>

                                        <!-- LEFT COLUMN -->

                                        <td class="deviceWidth" align="left" 
  width="50%" valign="top" style="padding-right:10px;">
                                            <a href="#" target="_blank"><img 
  class="resImage" src="http://www.nobledesktop.com/nl-date-night/img/beer-
  bar-label@2x.jpg" width="290" alt="Open Bar" style="display: block;border: 
  none;" moz-do-not-send="true"></a>
                                        </td>

                                        <!-- RIGHT COLUMN -->

                                        <td class="deviceWidth" align="left" 
  width="50%" valign="top" style="padding-left:10px;">
                                            <h2 style="color: #696969;font-
  family: Helvetica, Arial, sans-serif;font-size: 16px;line-height: 
  140%;margin-top: 0;margin-bottom: 0;">NEW BAR CRAWL PACKAGE&mdash;ALSO AS 
  A DOUBLE DATE!</h2>
  <p style="color: #363636;font-family: Helvetica, Arial, sans-serif;font-
  size: 12px;line-height: 140%;margin-bottom: 0;margin-top: 0;">You asked 
  and we delivered! Introducing our first optional double date package, the 
  Couples&#8217; New York Bar Crawl. Spend a Friday or Saturday night 
  exploring the nightlife in a new area with your loved one and friends. 
  You&#8217;ll visit five different bars in close proximity to each 
  other&mdash;no cabs or transportation required. Most importantly, the 
  first drink at every bar is on us! Check it out now for the special grab a 
  date price!  <a class="bookLink" href="#" target="_blank" style="color: 
  #e74b34;font-size: 10px;font-weight: bold;">Book Now</a></p>
                                        </td>

                                    </tr>
                                </table>

                            </td>
                        </tr>
                    </table>

                    <!-- LISTING THREE -->

                    <table align="center" border="0" cellpadding="0" 
  cellspacing="0" width="100%">
                        <tr>
                            <td class="row" align="center" width="100%" 
  style="padding:20px;">

                                <table align="center" border="0" 
  cellpadding="0" cellspacing="0" width="100%">
                                    <tr>

                                        <!-- LEFT COLUMN -->

                                        <td class="deviceWidth" align="left" 
  width="50%" valign="top" style="padding-right:10px;">
                                            <a href="#" target="_blank"><img 
  class="resImage" src="http://www.nobledesktop.com/nl-date-night/img/milan-
  canal@2x.jpg" width="290" alt="Canal Cruise - Milan" style="display: 
  block;border: none;" moz-do-not-send="true"></a>
                                        </td>

                                        <!-- RIGHT COLUMN -->

                                        <td class="deviceWidth" align="left" 
  width="50%" valign="top" style="padding-left:10px;">
                                            <h2 style="color: #696969;font-
  family: Helvetica, Arial, sans-serif;font-size: 16px;line-height: 
  140%;margin-top: 0;margin-bottom: 0;">DELUXE WEEKEND: FAR-FLUNG AND 
  ROMANTIC</h2>
  <p style="color: #363636;font-family: Helvetica, Arial, sans-serif;font-
  size: 12px;line-height: 140%;margin-bottom: 0;margin-top: 0;">You two are 
  so busy that a 7-day work week is all too familiar. Time to de-stress and 
  take a weekend to remember why you work so hard. Put your routine on pause 
  and enjoy a short vacation to an enchanted location. Choose from over 15 
  exotic remote and not-so-remote locations. Weekend date prices include a 
  hotel for two, a bottle of wine, and a planned activity. <a 
  class="bookLink" href="#" target="_blank" style="color: #e74b34;font-size: 
  10px;font-weight: bold;">Book Now</a></p>
                                        </td>

                                    </tr>
                                </table>

                            </td>
                        </tr>
                    </table>




                </td>
            </tr>
        </table>



    </td>
</tr>

</table>


</body>
</html>

最佳答案

首先，一个表得到响应。响应能力只能在一定程度上起作用。您应该使用 div 并为它们提供 float 属性。例如

<style>
    .div1 {
          max-width:680px !important;
          width:100% !important;
     }

      .div1 > img {
          max-width:200px !important;
          width:100% !important;
          float: left;
      }

      .div1 > .text-div {
          max-width:480px !important;
          width:100% !important;
          float: right;
      }

      .clear-fix 
      {
           content: " "; /* Older browser do not support empty content */
           visibility: hidden;
           display: block;
           height: 0;
           clear: both;
      }

</style>


<div class="div1">
    <img src=""/>
    <div class="text-div">
         <h5>OUT OF THE BOX DATES: BOXING FOR&nbsp;TWO</h5>  
         <p>If you enjoyed our punny joke, you&#8217;ll love our selection of unique and out of the box dates. 
         They&#8217;re designed to ignite a budding relationship or bring some new spark to an old flame. 
         Dinner and drinks is yesterday&#8217;s news, so get geared up and fight it out in the ring or take it down a level with lazy river meditation. 
         Expect to see a new and exciting date added to the date book every week.</p>
    </div>
</div>

并且不要忘记在您的 head 标签中添加此元标签

<meta name="viewport" content="width=device-width, initial-scale=1">

你可以在这里找到关于 clear-fix 的信息:

What is a clearfix?

关于html - 我的响应式 HTML 电子邮件没有响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45829094/

26 4 0
文章推荐： javascript - 屏幕底部居中的淡入文本
文章推荐： CSS，获取一个Div来扩展页面的高度
文章推荐： css缩放背景到一定比例的图像
文章推荐： javascript - 使用 jquery onresize 更改 div 的位置
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com