Question

我有一个简单的操作邮件程序

class UserMailer < ApplicationMailer

  def welcome_email(m)
    attachments.inline["banner.png"] = File.read("#{Rails.root}/app/assets/images/banner.png")
    mail(to: m, subject: 'Welcome to My Awesome Site')
  end


end

邮件发件人发送的电子邮件模板如下

<%= image_tag(attachments['banner.png'].url, style: 'width: 50%;') %>

<p> Thanks for purchasing with us! </p>

<hr>

现在我要解决的问题是在计算机屏幕上显示的图像在50％的宽度下看起来不错。但是在手机屏幕上却太小了。我希望宽度在移动显示器中为100％，在大屏幕或笔记本电脑和计算机屏幕中为50％。当我通过进入gmail网站通过移动浏览器检查电子邮件时，在移动屏幕中50％的宽度看起来太小。因此，我该如何使用动作邮件模板来实现这一目标。感谢您的帮助！谢谢！

Answer 1

为了使您的电子邮件模板流畅，您需要以这种方式设计模板，然后根据设备要求添加媒体查询。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style type="text/css">
      @media only screen and (max-width: 480px){
        .emailImage{
            height:auto !important;
            max-width:600px !important;
            width: 100% !important;
            }
       }
     </style>
    </head>
<body>
    <%= image_tag(attachments['banner.png'].url,class:"emailImage", style: '') %>

    <p> Thanks for purchasing with us! </p>

    <hr>
</body>

希望这会有所帮助。

遵守

使用actionmailer时如何根据设备类型或屏幕尺寸调整图像大小？

1 个答案: