Axure教程：移动端原型如何适配不同分辨率的手机？思维导图

（1）标题栏：添加一个矩形框，命名title，大小为400*40，蓝底白字，文字左对齐，左边距10。

（2）搜索框：添加一个矩形框模拟输入框，大小为360*40，灰色边框，灰色文字，文字左对齐，文字内容为“请输入搜索内容”。

（3）几个图标：在输入框下方添加5个占位符来表示，注意将左右两个占位符分别和上方的矩形框对齐。

（4）菜单栏：在稍微下方的位置添加个矩形框，命名为menu，表示菜单栏，大小和标题栏一致，背景为浅灰色。

我们发现除了手机屏幕比较小外，显示的效果和在电脑浏览器上的效果一样，并没有适配在手机上，也就是说，原型根本就没有识别到当前是在手机浏览器上显示。

这时我们发现效果图已经基本差不多在手机上正常显示了。

但是，还是有点问题！

怎么办呢？

办法是有的，这就是我们下一步要解决的问题。

思路：我们并不知道每个手机的屏幕大小是多少，但是Axure里有函数可以获得浏览器窗口的宽度，因此只要在原型页面加载完成时，设置一下标题栏和菜单栏的宽度和窗口宽度大小一样不就行了吗？

选择当前页面，双击“页面载入时”添加事件处理：

思路：我们将内容部分当作一个整体，在页面加载完成后，将内容移动到屏幕水平中面位置。

选择除标题栏和菜单栏外的内容部分，右键转换为动态面板，命名为main：

编辑前面的页面加载事件，移动动态面板main的绝对位置到屏幕水平中央位置，y位置不变，计算公式=（窗口宽度-动态面板宽度）/2，最终的表达式为“[[(Window.width-LVAR1.width)/2]]”，注意这里使用到局部变量表示动态面板：

我们能取到窗口的高度，因此我们计算出菜单栏在屏幕上的位置。具体位置=屏幕的高度-菜单栏的高度，最终表达式为“[[Window.height-LVAR1.height]]”，将菜单栏移动到这个位置即可，注意这里同样使用到了局部变量表示菜单栏：

可以看到原型已经适配了手机屏幕的大小，达到我们所需要的效果，即使你在换了不同的手机后，也同样会正常显示。