本文档描述了用 sketch 设计和输出响应式 html5 网页的步骤。

相关附件已经放在github上: https://github.com/surfsky/SketchResponsive.git

2018-08-06

一、安装Anima Sketch 插件

Anima 插件官网：http://launchpad.animaapp.com

AutoLayout：https://www.youtube.com/watch?v=v393LgriWCs&frags=pl%2Cwn

Stack Layout：https://www.youtube.com/watch?v=DiCXg17CwIY&frags=pl%2Cwn

To Responsive Html：

https://www.youtube.com/watch?v=00Hjzw9_YLs&t=1105s&frags=pl%2Cwn

https://www.youtube.com/watch?v=E3xZui2myUU

两个已发布的测试网站：

https://launchpad.animaapp.com/autoResponsive

https://launchpad.animaapp.com/autoweb

GitHub:

https://github.com/AnimaApp/Auto-Layout

https://github.com/AnimaApp/Launchpad

二、用Anima 插件设计布局

（1）使用pin和stack进行定位（注意嵌套的symbols内部也必须使用pin或stack）

（2）用 Breakpoints 进行多分辨率适配

（3）其它功能：

三、拉伸Sketch Artboard进行测试

四、预览网页并拉伸测试

五、 保存网页并修改html文件

（1）建议用chrome保存网页，并用三方编辑器整理代码。

（2）可删除尾部免费版的浮动标签代码

（3）可删除部分Head代码

<!-- saved from url=(0051)https://launchpad.animaapp.com/preview/8GdCX18/demo -->

<link rel="shortcut icon" type="image/png" href="https://animaapp.s3.amazonaws.com/home/favicon.png" />

<meta name="author" content="Launchpad by Anima" /> 

（4）保存并用浏览器打开, ok!

ps. 新版本的Anima插件界面布局上略有修改，操作基本一致。可去其官方网站查看最新文档。