自适應視圖的意思是，浏覽器寬度、高度不同時，就顯示條件匹配的視圖頁面内容，本文給大家講講手機移動端自适應視圖。

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

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

頁面自适應

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

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

當然，如果你隻做了一種視圖，那麼不管你如何瘋狂拖拽，網頁内容是不會變化的，你會看見的是多出了縱向滾動條或者橫向滾動條，僅此而已。

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

預設：系統預設尺寸大小，可以快速填充後面幾項設置數據。

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

條件：觸發該自适應視圖的條件，浏覽器窗口≥某寬度或≤某寬度。

寬：設置觸發自适應視圖寬度，如浏覽器窗口小于1280px時，顯示該視圖的頁面内容，手機我設置的寬度為500px，因為目前有些大屏手機，其實邏輯像素已經接近500px了，所以保險起見，設置小于500px則顯示手機視圖。

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

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

特别解釋一下“最大顯示分辨率”，意思是超過最大的顯示分辨率的屏幕，一律按照此視圖内容顯示網頁内容。

自适應視圖設置好後，就可以在不同大小頁面去設計網頁内容了。

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

手機自适應

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

手機自适應在菜單”發布-生成原型文件”的“手機/移動設備”中進行設置，這裡設置的是在手機網頁中如何完美顯示的問題。

如果你不設置，那麼可能你手機網頁顯示了網頁内容，然後兩邊寬度留白很多，或者顯示不完網頁内容，因為你在自适應視圖中設計的寬度可能是375px，可能是414px寬度。但是手機的屏幕尺寸種類非常多，設計尺寸并不能完全适應所有手機屏幕。

那麼為了不管哪種寬度，在手機網頁上都需要滿屏鋪滿網頁才更美觀，這裡的設置就是幹這事兒的。

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

包含視圖接口标記：勾選後，才會啟用手機網頁自适應屏幕大小。

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

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

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

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

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

用戶可調節：填寫no即可。

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

自動檢測和鍊接電話号碼（iOS)：在iOS中，可以自動檢測出電話号碼，點擊後，可以撥打電話，可選可不選，根據自己情況來吧。

主屏幕圖标：主要是把網頁設置到主屏幕時，顯示的圖标。

iOS屏幕啟動畫面：網頁放到桌面，打開後的啟動畫面，不多解釋，不懂的，要拖出去打。

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

iOS狀态欄樣式：default（白底黑字兒），black（黑底白字兒），black（半透明的黑底白字兒)

沒有具體的操作步驟，不過我想你看懂了這兩處設置的每項參數含義，那麼你已經學會了如何去做自适應網頁和手機屏幕自适應了。

福利：給大家一個Axure網站模闆，已經配置好頁面自适應與手機自适應，大家可以免費下載研究。

好了，聊完了，再見！

作者：世界是棵樹，世界是棵樹

本文由 @世界是棵樹 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部