怎么做一个pc端自适应布局,pc端如何响应式布局

顶部菜单就是一级导航菜单，顶部菜单实现起来比较简单，通过矩形制作就可以了，但是要注意顶部菜的交互，即在点击美一个一级导航菜单的时候，都要展示对应的左侧菜单（左侧菜单的实现后面会说）。

在顶部菜单的右侧，还有用户菜单，用户菜单就是大家通常使用的右上角菜单，包括消息列表、帮助、系统设置、退出系统等功能。对于用户菜单，也需要动态面板来实现。并且随着页面大小的调整，用户菜单也要向右移动对应的位置。

即用户菜单的位置 = 窗口宽度 – 用户菜单宽度 – 50 （50是调整距离，是用户菜单的右侧靠近浏览器右边的距离）

用户菜单的调整同样要在页面尺寸改变事件进行设置。

左侧菜单就是二级、三级菜单，同样通过动态面板来实现，有几个一级菜单，动态面板就要有几个对应的状态，点击一级菜单，就是动态的切换动态面板的状态。

同样，在每个二级、三级菜单里面，需要进行菜单的展开、收起的交互。具体的实现方式是：

1. 每个二级菜单都是一个动态面板；
2. 面板里面有两个状态，展开和收起的状态，
3. 用户点击收起、展开按钮，切换动态面板状态；
4. 这里要注意一点，要选择【推动和拉动元件】，这样在收起和展开的时候，其他的二级菜单的位置才会调整；

内容的展示比较简单，就是在点击菜单的时候，在content内联框架中打开具体的内容页面就可以了。

到了这里，自适应的高保真axure框架原型就做好了，想看演示的可以参考高保真演示。

本文由 @马白龙 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议