"自適應網頁設計"的概念

2010年，EthanMarcotte提出了"自適應網頁設計"(ResponsiveWebDesign)這個名詞，指可以自動識別屏幕寬度、并做出相應調整的網頁設計，自適應是為了解決如何才能在不同大小的設備上呈現同樣的網頁，很多網站的解決方法，是為不同的設備提供不同的網頁，比如專門提供一個mobile版本，或者iPhone/iPad版本，這樣做固然保證了效果，但是比較麻煩，同時要維護好幾個版本，而且如果一個網站有多個portal(入口)，會大大增加架構設計的復雜度。

---

各種自適應場景簡介

手機的屏幕比較小，寬度通常在600像素以下；iPad的屏幕寬度比手機大，通常在768到1024像素間；PC的屏幕寬度，一般都在1000像素以上(目前主流寬度是1366×768)。同樣的內容，要在大小迥異的屏幕上，都呈現出滿意的效果，并不是一件容易的事。

上圖是一套自適應UI范例，是設計師Mounse放在mediaqueri里設計的一套自適應的UI的作品。

• 如果屏幕寬度大于1300像素，則表現為上圖，這通常被用在適配pc端的web頁面。
• 如果屏幕寬度在600像素到1300像素之間，則表現為上圖，這通常被用在適配pad和pc小屏幕。
• 如果屏幕寬度在400像素到600像素之間，則表現為上圖。
• 如果屏幕寬度在400像素以下，則表現為上圖,這通常用在我們的移動端(mobile版)，自適應就是把上面的設計圖做到一個web頁面內而非多入口(portal)進入。

---

各種方法在各種自適應場景中的應用

1.使用行列組件的設備寬

測試案例下載地址：https://latest.ivx.cn/ih5/app/template/download?id=82

選中目標行或者列，在左邊屬性面板上點擊設置環境寬，就會出現以上的五種寬度,分別為大屏pc寬、中屏pc寬、小屏pc寬、小屏pad寬、手機寬

實際使用中我們可能不會分的那么細致，一般是按照設計師出的圖來決定分幾種情況，按照上面的設計圖，

我們在大屏pc寬里填入1300px，效果是窗口寬度大于等于1600px顯示當前效果，

在demo里，我們設置的窗口寬大于1300px顯示1300px，當前窗口寬為1600px，果然顯示1300px

我們在中屏pc寬里填入600px，效果是窗口寬度大于等于1280px，小于1600px，顯示當前效果，

在demo里，我們設置的窗口寬大于1024px到1280px,顯示600px，當前窗口寬為1024px，果然顯示600px

我們在小屏pc寬里填入400px，效果是窗口寬度大于等于1024px,小于1280px,顯示當前效果，

在demo里，我們設置的窗口寬小于640px,顯示400px，當前窗口寬為600px，果然顯示400px

我們在手機寬里填入400px，效果是窗口寬度小于等于640px顯示當前效果

在demo里，我們設置的窗口寬小于640px,顯示400px，當前窗口寬為600px，果然顯示400px

在iVX上許多繁雜的代碼操作都被集成到可視化的組件上，所以實現起來很簡單，選中目標行或者列，在左邊屬性面板上點擊設置環境寬，就會出現下面的五種寬度，你可以按照上面給出的通常情況下自適應選擇的參數填入，其實填入的數值并不固定，根據您目標用戶的設備以及設備分辨率可以自行調節，也不一樣要做5種，兩種(pc和移動端)也是可以的。

2.自適應方法二：使用行列組件的“撐開”屬性來適配各種不同高度的設備

測試案例下載地址：https://latest.ivx.cn/ih5/app/template/download?id=83

我們新建一個案例，在一個頁面里面建4個行，其中3個行為參考坐標，一個目標行使用行組件的撐開屬性做比對，可以看到我們當前窗口寬為1600px，而打開了撐開屬性的行也為1600px，也就是說，當一個行或者列使用撐開屬性時，窗口寬(高)的寬度(高度)就是被撐開的行(列)的寬度(高度)；

如果是同一行或者一列中使用2個(及以上)行或者列，并且都打開撐開屬性，是個什么狀態的？

顯而易見，邏輯上來說，應該是平分，我們來看看實際效果

實際效果和預計一樣，當前窗口寬為1600px,窗口寬度被占滿了，多個行或者列在同一行或者列內，使用撐開屬性，他們可以平分寬度(高度)

3.自適應方法三：利用橫幅進行底部定位

測試案例下載地址：https://latest.ivx.cn/ih5/app/template/download?id=84

打開案例，選中名為頂部左側的橫幅，看到他左邊的橫幅屬性面板，屬性面板里有個選項：整體布局

如上圖所示，我們在測試案例下，橫幅是出現在最上面的，需要把橫幅從頂部放到底部定位，

怎么來實現？

只需要選擇橫幅屬性面板里的整體布局，從左上換到左下

只需要選擇橫幅屬性面板里的整體布局，從左上換到左下

橫幅已經成功放到最下面了

首先選中目標對象，然后在左邊的屬性面板中找到整體布局，選中左下，然后保存預覽，就會發現在我們頂部導航被固定在底部了(ios在高速拖動下橫幅會有輕微抖動現象)。

4.自適應方法四：使用if容器來判斷設備環境

測試案例下載地址：https://latest.ivx.cn/ih5/app/template/download?id=85

我們新建一個案例，在案例內，建一個頁面，在頁面內放一個文本變量和幾個if容器，把文本變量的名字改為設備環境

打開測試案例，里面有四個if容器，一個是按pc客戶端適配的頁面

打開測試案例，里面有四個if容器，三個是按移動端客戶端適配的頁面，但這3個移動端頁面的內容是一致的，只是進入這三個頁面的瀏覽器入口不一樣

要使用if語句來判斷設備當前環境，首先根據設計師給出的高保真圖完成PC端和移動端的頁面，制作出pc端頁面和移動端頁面；因為設備環境是用來判斷用戶當前使用的客戶端環境，進而去通過if語句判斷選擇顯示哪種ui，所以需要在舞臺初始化或者寬度變化下，調用系統組件里的客戶端環境

如果當前處于pc端，那么我們就讓pc端的頁面顯示，如果當前處于移動端，那么我們就讓移動端的頁面顯示，按照上面的步驟我們就完成了用if判斷當前設備環境進而完成頁面的自適應。

總結

以上是生活随笔為你收集整理的手机端适应_不轻易透露的超强技巧！详解iVX中怎样做设备自适应的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。