Axure 生成页面在手机端浏览自适应
手机端浏览原型自适应
这里用640px做为原型设计的宽度，如果是其它尺寸代码改为相对应的数值就可。生成页面后用代码编辑工具打开html文件。插入代码在标签中间，这样的做法是为了自适应代码的执行效率。把要自适应的页面每个插入上面的自适应代码保存然后打包给工程师部署到服务器上，这样我们通过网址就能在手机浏览器上浏览手机界面原型了。前端工程师说有批量插入的方法，有会的前端大牛在评论区补充下方法。
打开微信“扫一扫”，将本文章分享到朋友圈
快给朋友分享吧！
Ctrl+Enter
你的打赏就是我的动力！
悄悄说，听说打赏的人收入都比我高，不信你试试。
注: 打赏金额随意，完成后，请手动关闭本窗口。
Ctrl+Enter
您将要删除您的大作
Axure 生成页面在手机端浏览自适应
在她入驻到UI中国的日子里
总共吸引了1225位设计师的驻足流连
总共收获了2位设计师的由衷赞赏
总共获得了1位设计师的悉心珍藏
总共引起了0位设计师的深入讨论
依然要删除吗？如何让Axure原型自适应手机移动端2收藏分享举报{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\u002Fpay.zhihu.com\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[],&title&:&如何让Axure原型自适应手机移动端&,&author&:&I-am-cyy&,&content&:&\u003Cp\u003E\u003Cb\u003E前言：\u003C\u002Fb\u003E很多时候我们设计一个手机产品原型，往往在手机端不能很好的展现出来，下面我来说说如何让你的产品原型适应手机移动端，达到我们满意的效果，如下面的最终效果图：\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-576a0f17ee1ead4bdcd9fa92c8436287_b.jpg\& data-rawwidth=\&333\& data-rawheight=\&642\& class=\&content_image\& width=\&333\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='333'%20height='642'&&\u002Fsvg&\& data-rawwidth=\&333\& data-rawheight=\&642\& class=\&content_image lazy\& width=\&333\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-576a0f17ee1ead4bdcd9fa92c8436287_b.jpg\&\u003E\u003C\u002Ffigure\u003E第一步：创建顶部标题，创建x=0,y=0,width*height=400*50px的矩形框，转化为动态面板，命名为title，并点击右键，在 “固定到浏览器”选项中打钩。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-e959d7da5915a3ebba64c1_b.jpg\& data-rawwidth=\&336\& data-rawheight=\&433\& class=\&content_image\& width=\&336\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='336'%20height='433'&&\u002Fsvg&\& data-rawwidth=\&336\& data-rawheight=\&433\& class=\&content_image lazy\& width=\&336\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-e959d7da5915a3ebba64c1_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E第二步：在标题下面创建width*height=350*500px的矩形，命名为main，\u003C\u002Fp\u003E\u003Cp\u003E第三步：同第一步，在main下面创建底部菜单，创建width*height=400*50px的矩形框，转化为动态面板，命名为menu，并点击右键，在 “固定到浏览器”选项中打钩。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-b00ab5051919ccc29e02ca39cfb8b372_b.jpg\& data-rawwidth=\&336\& data-rawheight=\&433\& class=\&content_image\& width=\&336\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='336'%20height='433'&&\u002Fsvg&\& data-rawwidth=\&336\& data-rawheight=\&433\& class=\&content_image lazy\& width=\&336\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-b00ab5051919ccc29e02ca39cfb8b372_b.jpg\&\u003E\u003C\u002Ffigure\u003E第四步：设置页面属性，点击“页面载入时”，添加case1，\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-d41f3a18ee60d833ab2f2_b.jpg\& data-rawwidth=\&546\& data-rawheight=\&247\& class=\&origin_image zh-lightbox-thumb\& width=\&546\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-d41f3a18ee60d833ab2f2_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='546'%20height='247'&&\u002Fsvg&\& data-rawwidth=\&546\& data-rawheight=\&247\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&546\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-d41f3a18ee60d833ab2f2_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-d41f3a18ee60d833ab2f2_b.jpg\&\u003E\u003C\u002Ffigure\u003E不懂的话可以点击效果图链接参考，记得用手机浏览器打开：\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fnii5dj.axshare.com\u002F%23c%3D2\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EUntitled Document\u003C\u002Fa\u003E\u003C\u002Fp\u003E&,&updated&:new Date(&T08:21:28.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:0,&collapsedCount&:0,&likeCount&:2,&state&:&published&,&isLiked&:false,&slug&:&&,&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&axure8&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&原型图&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&手机移动端&}],&adminClosedComment&:false,&titleImageSize&:{&width&:0,&height&:0},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&tipjarState&:&closed&,&annotationAction&:[],&sourceUrl&:&&,&pageCommentsCount&:0,&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T16:21:28+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&学生&,&isFollowing&:false,&hash&:&41a58684fdabc60ba750fb747cab1ba5&,&uid&:907300,&isOrg&:false,&slug&:&fan-qie-jiang-jun-88&,&isFollowed&:false,&description&:&&,&name&:&番茄酱君&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Ffan-qie-jiang-jun-88&,&avatar&:{&id&:&v2-e052e15cd305d400ba23b962c7b3957a&,&template&:&https:\u002F\u002Fpic4.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&科学到最后就是艺术&,&isFollowing&:false,&hash&:&b13b12e1424d&,&uid&:564200,&isOrg&:false,&slug&:&xu-kao-95&,&isFollowed&:false,&description&:&鸟在水中游，鱼在天上飞。不知水是水，天是天。——云儿说&,&name&:&云水天飞鸟鱼&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fxu-kao-95&,&avatar&:{&id&:&v2-e9ce07eb3d487d686d501&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&\u003Cb\u003E前言：\u003C\u002Fb\u003E很多时候我们设计一个手机产品原型，往往在手机端不能很好的展现出来，下面我来说说如何让你的产品原型适应手机移动端，达到我们满意的效果，如下面的最终效果图： 第一步：创建顶部标题，创建x=0,y=0,width*height=400*50px的矩形框，转化为动态面板…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&annotationDetail&:null,&commentsCount&:0,&likesCount&:2,&FULLINFO&:true}},&User&:{&I-am-cyy&:{&isFollowed&:false,&name&:&snail&,&headline&:&if
you have a try &,&avatarUrl&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-5ca47e12d4ccf18e030e89_s.jpg&,&isFollowing&:false,&type&:&people&,&slug&:&I-am-cyy&,&bio&:&产品经理,数据分析&,&hash&:&42b1eda09a253e8fa4eeab&,&uid&:112900,&isOrg&:false,&description&:&if
you have a try &,&badge&:{&identity&:null,&bestAnswerer&:null},&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002FI-am-cyy&,&avatar&:{&id&:&v2-5ca47e12d4ccf18e030e89&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}},&Comment&:{},&favlists&:{}},&me&:{},&global&:{&experimentFeatures&:{&ge3&:&ge3_9&,&ge2&:&ge2_1&,&growthSearch&:&s2&,&sEI&:&c&,&nwebQAGrowth&:&experiment&,&qawebRelatedReadingsContentControl&:&close&,&liveStore&:&ls_a2_b2_c1_f2&,&nwebSearch&:&nweb_search_heifetz&,&rt&:&y&,&isOffice&:&false&,&enableTtsPlay&:&post&,&newLiveFeedMediacard&:&new&,&newMobileAppHeader&:&true&,&androidPassThroughPush&:&all&,&hybridZhmoreVideo&:&yes&,&nwebGrowthPeople&:&default&,&nwebSearchSuggest&:&default&,&qrcodeLogin&:&qrcode&,&enableVoteDownReasonMenu&:&enable&,&isShowUnicomFreeEntry&:&unicom_free_entry_off&,&newMobileColumnAppheader&:&new_header&,&androidDbRecommendAction&:&open&,&biu&:&1&,&androidDbFeedHashTagStyle&:&button&,&appStoreRateDialog&:&close&,&default&:&None&,&isNewNotiPanel&:&no&,&biua&:&1&,&zcmLighting&:&zcm&,&adR&:&b&,&wechatShareModal&:&wechat_share_modal_show&,&growthBanner&:&default&,&androidProfilePanel&:&panel_b&}},&columns&:{&next&:{}},&columnPosts&:{},&columnSettings&:{&colomnAuthor&:[],&uploadAvatarDetails&:&&,&contributeRequests&:[],&contributeRequestsTotalCount&:0,&inviteAuthor&:&&},&postComments&:{},&postReviewComments&:{&comments&:[],&newComments&:[],&hasMore&:true},&favlistsByUser&:{},&favlistRelations&:{},&promotions&:{},&switches&:{&couldSetPoster&:false},&draft&:{&titleImage&:&&,&titleImageSize&:{},&isTitleImageFullScreen&:false,&canTitleImageFullScreen&:false,&title&:&&,&titleImageUploading&:false,&error&:&&,&content&:&&,&draftLoading&:false,&globalLoading&:false,&pendingVideo&:{&resource&:null,&error&:null}},&drafts&:{&draftsList&:[],&next&:{}},&config&:{&userNotBindPhoneTipString&:{}},&recommendPosts&:{&articleRecommendations&:[],&columnRecommendations&:[]},&env&:{&edition&:{&baidu&:false,&yidianzixun&:false,&qqnews&:false},&isAppView&:false,&appViewConfig&:{&content_padding_top&:128,&content_padding_bottom&:56,&content_padding_left&:16,&content_padding_right&:16,&title_font_size&:22,&body_font_size&:16,&is_dark_theme&:false,&can_auto_load_image&:true,&app_info&:&OS=iOS&},&isApp&:false,&userAgent&:{&ua&:&Mozilla\u002F5.0 (compatible, MSIE 11, Windows NT 6.3; Trident\u002F7.0; rv:11.0) like Gecko&,&browser&:{&name&:&IE&,&version&:&11&,&major&:&11&},&engine&:{&version&:&7.0&,&name&:&Trident&},&os&:{&name&:&Windows&,&version&:&8.1&},&device&:{},&cpu&:{}}},&message&:{&newCount&:0},&pushNotification&:{&newCount&:0}}