Как заставить медиа запросы / css работать в html email - PullRequest
Новая
       27

Как заставить медиа запросы / css работать в html email

0 голосов
/ 18 февраля 2019

У меня проблема с отображением html-письма для корректного отображения.HTML содержит медиа-запросы, чтобы сделать его реагирующим на устройства разных размеров ... он корректно отображается в браузере, но при отправке в виде электронной почты CSS не работает должным образом, чтобы отрегулировать положение значков.

Я пытался минимизировать CSS, сделать CSS! Важным и т. Д., И ничего не получилось.После проверки html письма в Gmail я заметил, что имена классов были изменены 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>

Когда я открываю html-файл в chrome и проверяю его при других настройках мобильного устройства, значки отображаются именно в том месте, где я бы хотел, чтобы они были.Но когда я на самом деле отправляю html как электронное письмо, все значки находятся под основным изображением.

1 Ответ

0 голосов
/ 20 февраля 2019

Спасибо за комментарий.Я думал, что Gmail не соблюдает мои css, но, как вы сказали, они просто не позволяют позиционировать.Поэтому я сделал свое фоновое изображение фоновым изображением таблицы и поместил значки внутри отдельных ячеек строки таблицы.Я использую пустые строки таблицы для позиционирования.CSS корректирует высоту строк пустой таблицы в зависимости от размера экрана устройства с помощью медиа-запросов.Работает как шарм!Спасибо!

...