自適應視圖的意思是，瀏覽器寬度、高度不同時，就顯示條件匹配的視圖頁面內(nèi)容，本文給大家講講手機移動端自適應視圖。

Axure 8 自帶自適應功能，可以自適應電腦、平板、手機等不同大小的屏幕。

要完成手機屏幕的適配，需要做兩個地方的設置，一個是頁面自適應，一個是手機自適應。

那我們先聊頁面自適應屬性，頁面自適應屬性可以通過菜單欄“項目-自適應視圖”中配置。自適應視圖的意思是，瀏覽器寬度、高度不同時，就顯示條件匹配的視圖頁面內(nèi)容，如電腦有些屏幕寬度為1920px、1280px等，手機屏幕寬度為375px。

在不同的屏幕寬度上，瀏覽器默認寬度則不同，或者你在電腦屏幕上瘋狂拖拽瀏覽器窗口大小，瀏覽器則會根據(jù)寬度切換到該條件的視圖進行顯示。

當然，如果你只做了一種視圖，那么不管你如何瘋狂拖拽，網(wǎng)頁內(nèi)容是不會變化的，你會看見的是多出了縱向滾動條或者橫向滾動條，僅此而已。

簡單針對自適應視圖設置中的幾個屬性進行解釋：

預設：系統(tǒng)預設尺寸大小，可以快速填充后面幾項設置數(shù)據(jù)。

名稱：就是給視圖取個名字。

條件：觸發(fā)該自適應視圖的條件，瀏覽器窗口≥某寬度或≤某寬度。

寬：設置觸發(fā)自適應視圖寬度，如瀏覽器窗口小于1280px時，顯示該視圖的頁面內(nèi)容，手機我設置的寬度為500px，因為目前有些大屏手機，其實邏輯像素已經(jīng)接近500px了，所以保險起見，設置小于500px則顯示手機視圖。

高：一般不設置此項，留空，原理與寬度一個意思。

繼承自：頁面中的默認元素繼承自哪個視圖，繼承的元素可刪除，然后會在原來的視圖依然存在。

特別解釋一下“最大顯示分辨率”，意思是超過最大的顯示分辨率的屏幕，一律按照此視圖內(nèi)容顯示網(wǎng)頁內(nèi)容。

自適應視圖設置好后，就可以在不同大小頁面去設計網(wǎng)頁內(nèi)容了。

生成HTML時，需要在菜單”發(fā)布-生成原型文件”的“自適應視圖”中勾選自適應視圖。

聊完頁面自適應，再來聊聊手機自適應。

手機自適應在菜單”發(fā)布-生成原型文件”的“手機/移動設備”中進行設置，這里設置的是在手機網(wǎng)頁中如何完美顯示的問題。

如果你不設置，那么可能你手機網(wǎng)頁顯示了網(wǎng)頁內(nèi)容，然后兩邊寬度留白很多，或者顯示不完網(wǎng)頁內(nèi)容，因為你在自適應視圖中設計的寬度可能是375px，可能是414px寬度。但是手機的屏幕尺寸種類非常多，設計尺寸并不能完全適應所有手機屏幕。

那么為了不管哪種寬度，在手機網(wǎng)頁上都需要滿屏鋪滿網(wǎng)頁才更美觀，這里的設置就是干這事兒的。

簡單針對手機自適應設置中的幾個屬性進行解釋：

包含視圖接口標記：勾選后，才會啟用手機網(wǎng)頁自適應屏幕大小。

寬度：【重要設置】此處寬度填寫在手機的自適應視圖中，設計圖的基準尺寸，我使用的375px（iPhone 6s）基準進行設計的，所以這里我填寫的是375的寬度。

高度：這里留空，無需填寫。

初始比例：這里留空，無需填寫，我試了試，這里不填寫默認比例為1。

最小比例：【重要設置】這項作用是當用戶使用比設計圖更小的手機瀏覽網(wǎng)頁時，可以等比縮放到手機屏幕寬度，這里設置的是最小值，我設置的0.5，足夠使用了。

最大比例：【重要設置】原理與最小比例相同，使用比設計圖更大的手機屏幕瀏覽網(wǎng)頁時，自動等比放大到手機屏幕寬度，這里我設置的3，目前主流手機的最大屏幕寬度邏輯像素為480，設置3倍已足夠使用。

用戶可調(diào)節(jié)：填寫no即可。

防止垂直頁面滾動（受阻彈性滾動）：這項我試了幾次，沒明白有什么影響，可選可不選，大家也可以自己試試，如果知道什么意思，可以留言說一下。

自動檢測和鏈接電話號碼（iOS)：在iOS中，可以自動檢測出電話號碼，點擊后，可以撥打電話，可選可不選，根據(jù)自己情況來吧。

主屏幕圖標：主要是把網(wǎng)頁設置到主屏幕時，顯示的圖標。

iOS屏幕啟動畫面：網(wǎng)頁放到桌面，打開后的啟動畫面，不多解釋，不懂的，要拖出去打。

隱藏瀏覽器導航（當從iOS主屏幕啟動時）：iOS打開放到桌面的網(wǎng)頁，不會顯示瀏覽器的導航欄和工具欄，比較適合預覽APP應用的效果，勾上就行。

iOS狀態(tài)欄樣式：default（白底黑字兒），black（黑底白字兒），black（半透明的黑底白字兒)

沒有具體的操作步驟，不過我想你看懂了這兩處設置的每項參數(shù)含義，那么你已經(jīng)學會了如何去做自適應網(wǎng)頁和手機屏幕自適應了。

福利：給大家一個Axure網(wǎng)站模板，已經(jīng)配置好頁面自適應與手機自適應，大家可以免費下載研究。

好了，聊完了，再見！

作者：世界是棵樹，微信公眾號：世界是棵樹

本文由 @世界是棵樹 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議