【基礎篇】

Adaptive View的設置入口就在頁面標尺0坐標上方，點它，在彈框里就可以添加設置各種分辨率的視圖了（下圖）

Base頁：即初始頁，比如PC端網頁設計的話可以自己定義為1024×768之類的尺寸；這里請注意：

Condition字段：包括”is greater than or equals”和“is less than or equals”兩個選項，與下方輸入的長寬值組成觸發響應的條件。

Inherit from字段：可選擇變形源的頁面，將在左側通過層級展示關系。

制作各分辨率視圖界面時，請務必根據inherit關系依次進行。這點請大家牢記！剛上手的同學可能會感覺疑惑：怎么后一視圖的A元素刪掉了前一視圖的A元素還在，但是前一視圖的A元素刪掉了后面所有視圖的A元素都沒了？因為Base視圖的元素將直接出現在后續分辨率視圖中且事實為同一元素，這是為了提升設計師工作效率，base視圖完成后，在第二視圖只需簡單拖拽就能完成，然后第三第四視圖同理依次完成就好。

我偏好從小往大設置，對應的觸發條件可以設置為例如圖中的：“當頁面尺寸大于等于1366(長) 768（高）時，從Base（1024×768）變形為1366×768視圖”

做每個分辨率視圖時，建議在顯著位置寫好分辨率值便于檢驗demo（如下圖），動手試一下你可能就會問：“怎么分辨率文字在所有視圖里都變成了1920×1080？”道理還是一樣，因為如果你是從Base添加的，那后續所有視圖的事實上為同一元素，而且這驗證了文字內容不能隨視圖變化。所以怎么辦？逐頁刪掉重新放文字元素上去就好。

假設要做一個網頁，從1024變化至1366寬時內容（白色）區域寬度達到大值，之后分辨率繼續變大時保持內容區寬度不變只改變左右padding（灰色左右間距）

完成后效果  http://6?alxvx.axshare.com

雖然足矣表達設計師想要的響應式布局，但是沒有實時的自適應效果，相信有追求的設計師絕對會心里不爽，那么我們繼續開坑改造，于是Axure的樂趣來了~

【進階篇】

準備工作

改造目標：

• 頁面能根據拖拽窗口實時自適應
• 內容區能在達到1366視圖中大寬度后保持寬度，并保持居中位置

重新明確分段變形：

1. Base（1024×768）為最小界面，不再隨窗口繼續變小
2. 1024-1366時，內容區寬度變大并在1366時達到大值
3. 1366+時，內容區寬度固定在大值，內容區與標題欄footer信息保持對齊且在右側保持居中（只增加左右padding）

尚能利用的廢料：

上一demo中幾個關鍵視圖：Base（最小界面，不會因為拖拽改變大小）、1366（內容區大寬度界面，分段變形轉折點）

明確這些后，我們開始動手，首先可以刪掉除了Base和1366的所有視圖。然后把界面上的背景部分（Menu高度，右側灰部長寬，標題和footer兩根分割線長度）盡量拉大。雖然也可以用函數來寫動態尺寸，但是本著RP思想，還是決定盡量節省工時偷懶一下為好。

增加1025視圖（意思是1025-1366寬度范圍），inhert from Base。

可實時變形的內容區域

考慮到1024向1366變形時，內容（白色）區寬度會逐漸變大，我們可以把內容區白色方塊右鍵convert into dynamic panel（后面簡稱DP）命名為frame1025（叫1025是因為觸發變形的寬度條件是1025px），然后在DPstate1中把白色方塊拉到非常大，保證變形至1366寬和無限高（基本1500就夠用）就好。

在頁面底部OnWindowResize項上雙擊

打開條件編輯窗增加交互行為Set Size of Dynamic Panel如下圖。為什么是寬度Window.width-221？這個尺寸因頁面尺寸而異，很好算。于是內容（白色）區frame 1025就可以隨鼠標拖拽窗口實時變形了。

保持頁面底部的footer

1024-1366段footer文字不會改變x值，只會隨頁面高度變化固底，最簡單的做法就是變成DP后右鍵選擇Pin to Browser，并設置與底部距離。（這里我將分割線和footer文字群組后變為一個DP）于是1024-1366段改造完畢。

隨頁面寬度變化的居中位

在1366視圖，我們的目標是讓內容區域、標題、footer文字固寬并隨頁面變寬始終居中。同樣，制作新內容區DP: frame 1366，在底部OnWindowResize增加交互行為如下圖

注意Move 后的選項”to”和”by”的區別，move to是移動到絕對坐標，move by是每次觸發條件的移動量。（如果選了move by，結果就會是每當窗口被拖拽，DP就移動一段距離直到跑出屏幕。）這里我們要選move to。

在1366+段，frame 1366仍會隨窗口高度變大，同樣在這里增加交互行為如下圖，于是內容區改造完成！

能做到以上部分的話，那么繼續改造1366+段的標題和footer其實已經易如反掌了，用的方法其實完全一樣，不是變形就是移動而已。