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

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

要完成手機(jī)屏幕的適配，需要做兩個(gè)地方的設(shè)置，一個(gè)是頁面自適應(yīng)，一個(gè)是手機(jī)自適應(yīng)。

頁面自適應(yīng)

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

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

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

簡(jiǎn)單針對(duì)自適應(yīng)視圖設(shè)置中的幾個(gè)屬性進(jìn)行解釋：

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

名稱：就是給視圖取個(gè)名字。

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

寬：設(shè)置觸發(fā)自適應(yīng)視圖寬度，如瀏覽器窗口小于1280px時(shí)，顯示該視圖的頁面內(nèi)容，手機(jī)我設(shè)置的寬度為500px，因?yàn)槟壳坝行┐笃潦謾C(jī)，其實(shí)邏輯像素已經(jīng)接近500px了，所以保險(xiǎn)起見，設(shè)置小于500px則顯示手機(jī)視圖。

高：一般不設(shè)置此項(xiàng)，留空，原理與寬度一個(gè)意思。

繼承自：頁面中的默認(rèn)元素繼承自哪個(gè)視圖，繼承的元素可刪除，然后會(huì)在原來的視圖依然存在。

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

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

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

手機(jī)自適應(yīng)

聊完頁面自適應(yīng)，再來聊聊手機(jī)自適應(yīng)。

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

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

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

簡(jiǎn)單針對(duì)手機(jī)自適應(yīng)設(shè)置中的幾個(gè)屬性進(jìn)行解釋：

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

寬度：【重要設(shè)置】此處寬度填寫在手機(jī)的自適應(yīng)視圖中，設(shè)計(jì)圖的基準(zhǔn)尺寸，我使用的375px（iPhone 6s）基準(zhǔn)進(jìn)行設(shè)計(jì)的，所以這里我填寫的是375的寬度。

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

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

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

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

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

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

自動(dòng)檢測(cè)和鏈接電話號(hào)碼（iOS)：在iOS中，可以自動(dòng)檢測(cè)出電話號(hào)碼，點(diǎn)擊后，可以撥打電話，可選可不選，根據(jù)自己情況來吧。

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

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

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

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

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

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

下載地址：https://lansn.coding.net/api/share/download/c8154d70-cf59-4241-81c9-6a33c03773d0

好了，聊完了，再見！

作者：世界是棵樹，微信公眾號(hào)：世界是棵樹

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

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