摘要:概述新课题研究响应式邮件框架官网姐妹篇响应式邮件框架介绍打开官网,就能看到的主标题是大家再熟悉不过,是和齐名的响应式框架所以可以放心使用不知道大家怎么看待响应式框架,像之前那个姐妹篇一样,也有标记语言。期待您的来电或邮件网址电话邮箱
概述
新课题研究:响应式邮件框架Formerly Ink(Formerly Ink官网:http://foundation.zurb.com/emails.html)
姐妹篇: EDM响应式邮件框架:Formerly Ink
打开官网,就能看到Formerly Ink的主标题是Foundation for Emails2
Foundation大家再熟悉不过,是和bootstrap齐名的响应式框架
所以可以放心使用Formerly Ink~~
安装不知道大家怎么看待响应式框架,像之前那个姐妹篇MJML一样,Formerly Ink也有标记语言Inky。鉴于标记语言都差不多,今天就不用Inky作为讲解主体了。
有两种方法
方法一 CSS Version
下载压缩包:Download Foundation for Emails
方法二 Sass Version
npm install --global foundation-cli foundation new --framework emails使用
以css版本为例,说说怎么用
基础模板默认邮件模板
|
因为是响应式,所以少不了栅格~
容器 container就放在上面那个基础模板的center里,里面放你的邮件代码
放在容器内
放在行内,一行最多12列
像bootstrap一样,用类名控制在行内的大小和位置
small类是手机显示 large类是电脑显示
首列需要添加.first类名,末列需要添加.last类名
Column One | Column Two |
---|
和bootstrap一样,还有其他的样式类名,与响应式邮件不直接相关就不在此多说了,有兴趣的话可以自行了解
官方文档: Bring Your Email Styles Inline
行内样式转换由于有的邮件客户端会忽略
|