给响应式布局做测试从来都不简单，事实上在寻找桌面、移动和平板设备的尺寸之间的那一个个布局 “断点” 一直都很麻烦。现在我们给大家准备了一个趁手的工具——resizer。
resizer 是什么？△使用 resizer 很简单：输入您的网址就可以在各个尺寸下预览网站和演示项目。
作为数字产品的设计和开发人员，我们面临的最大挑战之一就是，如何在正确的时间为各种类型的用户提供正确的 ui。无论是通过手机还是 vr，使用手势还是鼠标，使用最新尖端设备还是古旧的 2g 设备，我们的职责是让所有人都能用上我们的产品。这个任务并不简单，没有任何一种设计解决方案能满足所有需求。
我们已经开始在布局断点、响应式网格、界面行为和用户界面模式等方面提供 material design 设计指导服务。resizer 正是用来让您使用动态手段测试设计成果的工具。而且这个直观的工具能促进设计师、开发者和项目的利益相关方三者之间达成更加卓有成效的对话。
探索 ui 模式屏幕尺寸的更改会导致特定元素的位移，这些改动可能会导致您需要根据情况选择不同的?ui?模式：显示、形变、分割、折行、扩展，等等。resizer?帮助设计师和开发者以可视化的方式看清，哪种?ui?模式在哪种尺寸下是最适合采用的。我们已经准备好了几个演示文件，您可以在?resizer?的地址栏里中找到它们：
pesto 演示：
△ pesto：现代化的烹饪应用，可以帮助您发现、分享、存储食谱。
食谱应用?pesto 展示了一些较受欢迎的设计模式。它使用了基于屏幕大小自动进行流式布局的网格列表。应用栏中的图标会根据工具栏的高度变换。根据用户是在桌面端还是移动端查看应用，悬浮按钮 (fab – “floating action button“) 会改变位置。
查看食谱的详细信息时，请尝试点击右上角的 “更多” 图标。请注意桌面设备这个操作会就近展开一个菜单，而在移动设备上则会在屏幕底部弹出菜单。
shrine 演示：
△ shrine：购物应用，目标用户为年轻人、diy?制造爱好者以及喜爱独立小规模零售品的购物者。
shrine 强调真正改变导航模式的重要性，而不是简单地基于屏幕尺寸或设备对各组件进行缩放。?shrine?使用不同类型的响应式网格列表创造出顺畅的购物体验。选项卡展示了一个组件是如何转换为另一个组件的。您可以尝试使用?resizer，看看它们是如何从大窗口变成小窗口，从平板电脑模式转换到手机模式的。
下一步：自己动手试试围绕自适应 ui 制定合理的指导方针是一个持续的过程，我们一直努力在?material design?指导文件中提及这一点。resizer?是动态地展示这些解决方案的工具，因此您可以将您的产品的?url?粘贴到其中，看看您的产品在各种尺寸的屏幕上表现如何。点击 “阅读原文” 启动 resizer 试试吧！