Gmail CSS样式 [英] Gmail CSS Styling

问题描述

我在Gmail中遇到一些CSS问题。我的HTML电子邮件具有响应性，可以在iPhone上正常使用，但是当发送到Gmail时，它会显示 mobile_toolbar和 full_toolbar。我需要摆脱移动工具栏的位置，以便为Gmail桌面正确设置电子邮件的格式。

I am having some CSS issues with Gmail. My HTML email is responsive and works on iPhone great but when being sent to Gmail, it displays the "mobile_toolbar" and "full_toolbar". I need to get rid of the mobile toolbar so the email is formatted correctly for Gmail Desktop.

我已经尝试使用display：none！important了，但是不起作用。

I have already tried using display:none !important but it is not working.

谢谢！

CSS：

<style type="text/css">
.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff;}
body     {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family:Arial}
table {border-collapse: collapse;}
p {font-family: Arial, serif;}
a {font-family: Arial, serif;}

@media only screen and (max-width: 640px)  {
                body[yahoo] .deviceWidth {width:440px!important; padding:0;}    
                body[yahoo] .center {text-align: center!important;}  
                                    #full_toolbar {display:none !important;}



                #mobile_toolbar {display:block; background:white;}

                #mobile_toolbar a {text-decoration:none;}
        }

@media only screen and (max-width: 479px) {
                body[yahoo] .deviceWidth {width:280px!important; padding:0;}    
                body[yahoo] .center {text-align: center!important;}  
        }

            @media screen and (min-width: 641px) and (max-width: 1920px) {
                *[id=mobile_toolbar] {

display:none!important;
overflow:hidden!important;

 }

        }   

HTML：

                    <div id="full_toolbar"><img usemap="#toolbar" class="deviceWidth" src="images/main_toolbar.jpg" alt="" style="display: block; border-radius: 4px;" border="0">

                <div id="mobile_toolbar" >

                <a href="#"><div style="margin-bottom: 5px; width:100%; height:100%; color:black; background:#a4a4a4; font-weight: bold;">New Inventory</div>
                <a href="#"><div style="margin-bottom: 5px; width:100%; color:black; background:#a4a4a4; font-weight: bold;">Used Inventory</div>
                    <a href="#"><div style="margin-bottom: 5px; width:100%; color:black; background:#a4a4a4; font-weight: bold;">Services</div>
                        <a href="#"><div style="margin-bottom: 5px; width:100%; color:black; background:#a4a4a4; font-weight: bold;">Directions</div>
                            <a href="#"><div style="margin-bottom: 5px; width:100%; color:black; background:#a4a4a4; font-weight: bold;">Contact</div>
<a href="#"><img src="images/twitter.jpg"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><img src="images/facebook.jpg">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><a href="#"><img src="images/youtube.jpg"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><img src="images/google.jpg"></a>

                </div>  

推荐答案

Gmail仅接受嵌入式样式。没有head标签，没有样式标签，仅内联。这意味着没有媒体查询。

Gmail only accepts inline stylings. No head tags, no style tags whatsoever, only inline. That means no media queries.

这应该给您所需的答案。 ：）

This should give you the answer you need. :)

这也有很大帮助： http：//www.campaignmonitor .com / css /

这篇关于Gmail CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！