本文給大家分享的是：畫APP原型時歼捏，設(shè)置手機(jī)殼為頁面背景处嫌，內(nèi)嵌框架為手機(jī)屏幕（原型的內(nèi)容區(qū)）的情況下，保持手機(jī)殼偎球、手機(jī)屏幕與頁面之間，左右/垂直居中對齊（兼容不同尺寸的電腦屏幕）
原型預(yù)覽地址：http://www.vip.pmyuanxing.com/文章/手機(jī)殼/index.html
一辑甜、頁面背景的設(shè)置
1衰絮、設(shè)置頁面居中對齊；
2磷醋、設(shè)置頁面背景顏色（灰背景色值：#F5F5F5猫牡，黑背景色值：#121212，或自行選擇）邓线；
3淌友、導(dǎo)入手機(jī)殼為頁面背景圖片；
4骇陈、設(shè)置頁面背景垂直居中對齊震庭；
5、設(shè)置頁面背景左右居中對齊你雌；
6器联、設(shè)置頁面背景不重復(fù)。
二婿崭、內(nèi)嵌框架（手機(jī)屏幕）的設(shè)置
1拨拓、在頁面中拖入一個內(nèi)嵌框架（手機(jī)屏幕，即顯示原型的內(nèi)容區(qū)氓栈，下同）渣磷，命名為【Frame】，設(shè)置寬度為：375px授瘦，高度為：667px醋界；
2竟宋、選擇內(nèi)嵌框架（手機(jī)屏幕）默認(rèn)打開的頁面（在瀏覽器中預(yù)覽時，該內(nèi)嵌框架默認(rèn)顯示的頁面）物独；
3袜硫、隱藏內(nèi)嵌框架（手機(jī)屏幕）的邊框；
4挡篓、框架滾動條選擇【從不顯示】婉陷。
前面已設(shè)置頁面居中對齊。
所以預(yù)覽時官研，內(nèi)嵌框架（手機(jī)屏幕）會兼容不同寬度的電腦屏幕秽澳，左右居中顯示在手機(jī)殼中。
為兼容不同高度的電腦屏幕戏羽，讓內(nèi)嵌框架（手機(jī)屏幕）担神，垂直居中顯示在手機(jī)殼中，
接下來還要添加頁面事件：
窗口尺寸改變時始花，移動內(nèi)嵌框架（手機(jī)屏幕）的頭部的縱坐標(biāo)值（y坐標(biāo)值）
=（頁面高度-內(nèi)嵌框架高度）/2
=(Window.height-frame.height)/2
=內(nèi)嵌框架（手機(jī)屏幕）與頁面垂直居中對齊
完成后妄讯，可以嘗試將頁面放大或縮小，手機(jī)殼及原型內(nèi)容始終保持左右/垂直居中對齊酷宵。
原型預(yù)覽地址：http://www.vip.pmyuanxing.com/文章/手機(jī)殼/index.html
更多原型文章亥贸，請查看Axure產(chǎn)品原型官網(wǎng)：www.pmyuanxing.com
本文結(jié)束了哈。
作者：亮亮浇垦，公眾號：Axure產(chǎn)品原型炕置，QQ交流群：702834810
