我的响应式 HTML 电子邮件在 Gmail 上实际发送时没有响应

Question

我已经设置了一个简单的响应式 HTML/CSS 页面，可以用作 HTML 电子邮件，虽然它在网站上是响应式的，但当我尝试使用 gmail 发送它时，它把一切都搞砸了.徽标变小，按钮没有任何风格。有时，当我尝试发送电子邮件时，它会以水平方式显示项目，而不是我想要的垂直方式。

我试过向多个在线提供商发送此类服务的电子邮件，但代码总是错误的，而且我读到内联样式更好，我也试过但仍然无济于事。

下面是我的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Saira:wght@100;200;300;400;500;600;700;800;900&display=swap');
        body {
            background-color: rgb(187, 187, 187);
            padding: 10%;
            font-family: 'Montserrat', sans-serif;
font-family: 'Saira', sans-serif;
        }

        .container {
            background-color: white;
            display: flex;
            flex-direction: column;
        }

        .header {
            height: 130px;
            display: flex;
            align-items: center;
            width: 100%
        }

        #logo {
            max-height: 60%;
            margin-left: 2vw;
            max-width: 100%
        }

        #banner {
            max-width: 100%;
        }

        .titulli {
            display: flex;
            justify-content: center;
            font-size: 3vw;
        }

        .teksti {
            background-color: rgb(236, 236, 236);
        }

        p {
            margin: 2vw 10vw 2vw 10vw;
        }

        .butonat{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 5vw;
        }

        #butoni{
            margin-bottom: 3vw;
            font-size: 4vw;
            font-weight: bold;
            height: 10vw;
            width: 30vw;
            border:none;
            background-color: rgb(255, 230, 0);
            border-radius: 10%;
        }

        .grupiLogot{
            display: flex;
            flex-direction: row;
        }
        .logot {
            max-width: 7vw;
            padding: 0.5vw;
        }

        .footeri{
            color: rgb(255,230,0);
            background-color: rgb(27, 27, 27);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 4vw 0 4vw 0;
        }

        h4{
            margin: 0.2vw;
            font-weight: 300;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <!-- <img id="logo" src="logo.png" alt=""> -->
            <img id="logo" src="https://i.ibb.co/GtY9kYz/logo2.png" alt="">
        </div>


        <img id="banner" src="https://i.ibb.co/LtG9PDg/banner.png" alt="">

        <div class="titulli">
            <h2>20% Off Summer Sale Now!</h2>
        </div>

        <div class="teksti">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias necessitatibus eos inventore minus
                velit, quas fugiat expedita explicabo consequuntur ea enim temporibus nostrum deserunt, veniam,
                voluptatum assumenda libero nesciunt ipsa.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque nemo tenetur sunt eligendi quae maxime
                nesciunt! Iure consequatur ad quaerat.</p>
        </div>

        <div class="butonat">
            <button id="butoni">SHOP NOW</button>

            <div class="grupiLogo">
                <img src="https://i.ibb.co/XY5W1hV/facebook.png" alt="" class="logot">
                <img src="https://i.ibb.co/JdSsCN3/instagram.png" alt="" class="logot">
                <img src="https://i.ibb.co/Cv91mdp/twitter.png" alt="" class="logot">
                <img src="https://i.ibb.co/j3rdqgk/whatsapp.png" alt="" class="logot">
            </div>
        </div>

        <div class="footeri">
            <h4>Lorem ipsum dolor sit.</h4>
            <h4>Lorem ipsum dolor sit.</h4>
            <h4>Lorem ipsum dolor sit.</h4>
            <h4>Lorem ipsum dolor sit.</h4>
        </div>

    </div>
</body>

</html>

以下是它在 Iphone 上的显示截图：https://imgur.com/a/6ZZEpXt

Answer 1

您需要熟悉哪些受支持，哪些不受支持。执行此操作的一项服务是 caniemail.com。例如，不支持 Flex。

由于 Windows 上的 Outlook 桌面，人们通常会使用 table 布局。

Gmail 的某些版本以及其他电子邮件环境会忽略您的 <style> 部分，因此您也需要内联样式。

搜索 'fluid hybrid email' 以获取基本结构。

您可能还需要 emailresourc.es 以获得广泛的信息。

我的响应式 HTML 电子邮件在 Gmail 上实际发送时没有响应

My responsive HTML Email is not responsive when it's actually sent on Gmail

html

css

html-email

responsive-design