高端大氣 RWD 實作範例(一)

AxureRP 在上個版本中加入了 Adaptive Views 的畫面設定方法，讓自適應網頁看起來更好做佈局設定

基本的 Adaptive Views 教學請看這裡 ，由悠識數位顧問提供。下圖為常用 Adaptive Views 設定

而這次要教的就是真正的RWD!!!不需要做 Adaptive Views 設定，但是腦子一定要清楚！下面就來實作 RWD 的 Header 部分

第一部分：頁面 Loading 偵測視窗寬度，讓 Header 初始就隨視窗寬變化

首先我們置入一個 Box 當做 Header ，寬度設定在360(現行手機版最小寬度)，高度分別為40/60，我們要由小做到大，接著設定 OnPageLoad 這個動作

OnPageLoad要設定兩組條件：在 Condition 裡面設定 Value ，點擊 fx 或直接輸入[[window.width]]。第一組介於360與768之間，第二組大於768，若是想要其他判斷就直接設定區間即可

設定完上述條件，我們在斷點的設定就好了，接下來要設定的就是Header 的延伸範圍

case 1 (大於360小於768)設定 Box 的寬是跟著視窗寬，高度40；case2 (大於768)設定 Box 的寬是跟著視窗寬，高度60，切記變形錨點 Anchor 都在左上角會比較好

第一步完成，這時候我們已經可以測試每次不同視窗寬都可以隨意變化

第二部分：Header 隨視窗寬度即時變化

接著設定 OnWindowResize 這個動作，原理就是我們要及時在頁面拉伸時也要隨著變形，原理跟第一部分一樣，只是 Javascript 偵測到不同事件，所以非常偷吃步，只要把第一部分的 Case1 & Case2 複製到 OnWindowResize 這個動作底下即可，非常簡單吧！

這邊線上的範例就可以看到第一部分跟第二部分的差異在哪裡了

小秘訣：如果用 Dynamic Panel 取代 Box 可以玩的東西更多！Fx 參數裡面是另外一個世界

如果喜歡 Axure Geek 的內容，請用 👏 給我們支持與鼓勵，能分享更好！
最多可以 👏 50下哦！