WEB大前端:5分钟玩转Axure之自适应设计(带案例讲解)

您所在的位置:网站首页 网页设计自适应屏幕怎么改变 WEB大前端:5分钟玩转Axure之自适应设计(带案例讲解)

WEB大前端:5分钟玩转Axure之自适应设计(带案例讲解)

2024-07-14 06:37| 来源: 网络整理| 查看: 265

网页开发时通常需要考虑到不同电脑屏幕尺寸,以及不同手机屏幕大小等问题,解决样式发生改变的情况,那么如何解决呢?现在主要是自适应网页设计来解决高度、宽度,以及图片自适应问题,在进行原型设计时也需要考虑多终端问题,为此需要考虑自适应问题。

以下通过两个案例讲解Axure的宽度自适应和高度自适应。

案例1:宽度自适应

宽度自适应即根据不同的载体的宽度不同设置适合当前载体的的页面,例如:屏幕为网页尺寸时,页面内容显示适合网页尺寸的界面,屏幕尺寸缩降到手机或平板尺寸时间,页面内容显示适合手机或平板尺寸的界面,如图1-1所示。

图1-1 宽度自适应动态效果(需要替换为“宽度自适应.gif”)

实现宽度自适应效果需要开启自适应功能和设置自适应条件。自适应功能属于页面的属性,所以开启自适应功能需要选择整个页面,如图1-2所示。

图1-2

编辑自适应条件,在自适应视图中默认只有基本视图,可以点击“+”号设置其它视图,如图1-2所示。

图1-3

设置后结果如图1-4所示。在图1-4中实现了两个视图,分区为480以下视图,和480以上(基本)视图,基本视图类似于if ... else中的else,当if条件不成立时执行else中的语句体,与if ... else的区别是在Axure中的else(基本视图)中编辑的元件,会在所有视图中呈现,如果就需要在else情况时呈现,需要将else(基本视图)之外的视图中的多余元件删除。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3