Question

嗨，我正在创建一个电子新闻简报，我试图调整它的大小，当它在移动设备上查看我在iphone上工作但是我不确定如何调整大小，因为大量的屏幕变体。这是迄今为止我所得到的。

所以在我的i中，如果屏幕宽度是一定的尺寸，我也会添加一些内容。

@media only screen and (max-device-width: 320px) {
            .hide { display: none !important; }
            #main_content, #inner_content, .mobwidth { width: 300px !important; }
            #content_rows, .mobwidthtext {width:300px !important;}
            .banner {height:94px !important;}
            .top {height:67px !important;}  
            .footer {height:109px !important;}

    }


    @media only screen and (max-device-width: 400px) {
            .hide { display: none !important; }
            #main_content, #inner_content, .mobwidth { width: 400px !important; }
            #content_rows, .mobwidthtext {width:380px !important;}
            .banner {height:117px !important;}
            .top {height:83px !important;}  
            .footer {height:136px !important;}

    }

Answer 1

大多数电子邮件客户端都忽略非内联的CSS声明。嵌入式样式表也会被忽略。媒体查询不起作用，因为它们会覆盖基于网络的电子邮件客户端（例如Gmail）所做的那些（即您想要做的事情不起作用）。

电子邮件HTML标准非常缺乏智慧。请记住，像MS Outlook这样的东西甚至不使用浏览器技术来查看电子邮件 - 他们使用的是MS Word引擎。

这是一个很好的指南，可以在电子邮件中使用哪些CSS功能：

http://www.campaignmonitor.com/css/

Answer 2

我不同意上述答案。使用移动设备的媒体查询肯定会有效，但是对于android，将最大屏幕尺寸设置为480.确保在查询设置的所有样式上保持！重要，并确保在内联样式中有一般布局。这将导致浏览器将头部中的css剥离并仅使用内联。然后使用您的媒体查询移动设备（其中大多数不剥离头），我建议在发送之前进行大量测试。但是你唯一的问题就是找到正确的最大宽度，因为你必须考虑到纵向和横向宽度。同时还考虑到缩放也可以用某些设备启动meia查询

html使电子邮件适合多个移动设备

2 个答案: