我们制作完成的原型发布后，有时候需要适配手机、浏览器、平板等设备，如何保证各种设备之间有良好的用户体验是我们今天需要掌握的核心知识。首先我们使用的制作原型的软件是Axure RP 8.0版本，大家可以自行下载安装，接来来讲解详细的步骤。1、创建自适应基本页面第一步就是创建一个自适应页面，页面包含两个矩形元件，每个矩形元件的长度设置值为大于500，并分别标记为WEB页面，如下图所示：2、开启页面自适应功能从页面的左上角查看是否开启了页面自适应功能，如果左上角没有找到如下图所示的图片，说明页面自适应没有启动，您可以从右边标记红色框的提示中开启自适应功能。3、添加自适应视图点击自适应页面的左上角，弹出如下窗口：设置窗口的参数名称：手机纵向，条件<=,宽320，继承于：基本。（解释：这里面最难理解的就是继承于，继承于基本这里指的就是我们刚开始创建的自适应页面）4、继续添加一组手机纵向条件为<=200，唯一不同的就是这里的继承于设置为“手机纵向（320X任何一下），如下图所示。5、测试结果打开浏览器，会显示如下页面：缩小浏览器，至宽度小于320，会显示如下页面：缩小浏览器，至宽度小于200，会显示如下页面：好了，今天的教程接介绍到这里，感谢大家的学习，记得帮忙点赞+转发，感谢！ #pgc-card .pgc-card-href { text-decoration: none; outline: none; display: block; width: 100%; height: 100%; } #pgc-card .pgc-card-href:hover { text-decoration: none; } /*pc 样式*/ .pgc-card { box-sizing: border-box; height: 164px; border: 1px solid #e8e8e8; position: relative; padding: 20px 94px 12px 180px; overflow: hidden; } .pgc-card::after { content: ” “; display: block; border-left: 1px solid #e8e8e8; height: 120px; position: absolute; right: 76px; top: 20px; } .pgc-cover { position: absolute; width: 162px; height: 162px; top: 0; left: 0; background-size: cover; } .pgc-content { overflow: hidden; position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .pgc-content-title { font-size: 18px; color: #222; line-height: 1; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pgc-content-desc { font-size: 14px; color: #444; overflow: hidden; text-overflow: ellipsis; padding-top: 9px; overflow: hidden; line-height: 1.2em; display: -webkit-inline-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .pgc-content-price { font-size: 22px; color: #f85959; padding-top: 18px; line-height: 1em; } .pgc-card-buy { width: 75px; position: absolute; right: 0; top: 50px; color: #406599; font-size: 14px; text-align: center; } .pgc-buy-text { padding-top: 10px; } .pgc-icon-buy { height: 23px; width: 20px; display: inline-block; background: url(https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/pgc/v2/pgc_tpl/static/image/commodity_buy_f2b4d1a.png); } Axure8/9大数据BI可视化大屏数据图表元件库RP模板组件库 ￥39.9 购买
本文出自快速备案，转载时请注明出处及相应链接。