"自適應(yīng)網(wǎng)頁設(shè)計(jì)"的概念

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

---

各種自適應(yīng)場景簡介

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

上圖是一套自適應(yīng)UI范例，是設(shè)計(jì)師Mounse放在mediaqueri里設(shè)計(jì)的一套自適應(yīng)的UI的作品。

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

---

各種方法在各種自適應(yīng)場景中的應(yīng)用

1.使用行列組件的設(shè)備寬

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

選中目標(biāo)行或者列，在左邊屬性面板上點(diǎn)擊設(shè)置環(huán)境寬，就會出現(xiàn)以上的五種寬度,分別為大屏pc寬、中屏pc寬、小屏pc寬、小屏pad寬、手機(jī)寬

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

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

在demo里，我們設(shè)置的窗口寬大于1300px顯示1300px，當(dāng)前窗口寬為1600px，果然顯示1300px

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

在demo里，我們設(shè)置的窗口寬大于1024px到1280px,顯示600px，當(dāng)前窗口寬為1024px，果然顯示600px

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

在demo里，我們設(shè)置的窗口寬小于640px,顯示400px，當(dāng)前窗口寬為600px，果然顯示400px

我們在手機(jī)寬里填入400px，效果是窗口寬度小于等于640px顯示當(dāng)前效果

在demo里，我們設(shè)置的窗口寬小于640px,顯示400px，當(dāng)前窗口寬為600px，果然顯示400px

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

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

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

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

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

顯而易見，邏輯上來說，應(yīng)該是平分，我們來看看實(shí)際效果

實(shí)際效果和預(yù)計(jì)一樣，當(dāng)前窗口寬為1600px,窗口寬度被占滿了，多個(gè)行或者列在同一行或者列內(nèi)，使用撐開屬性，他們可以平分寬度(高度)

3.自適應(yīng)方法三：利用橫幅進(jìn)行底部定位

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

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

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

怎么來實(shí)現(xiàn)？

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

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

橫幅已經(jīng)成功放到最下面了

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

4.自適應(yīng)方法四：使用if容器來判斷設(shè)備環(huán)境

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

我們新建一個(gè)案例，在案例內(nèi)，建一個(gè)頁面，在頁面內(nèi)放一個(gè)文本變量和幾個(gè)if容器，把文本變量的名字改為設(shè)備環(huán)境

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

打開測試案例，里面有四個(gè)if容器，三個(gè)是按移動(dòng)端客戶端適配的頁面，但這3個(gè)移動(dòng)端頁面的內(nèi)容是一致的，只是進(jìn)入這三個(gè)頁面的瀏覽器入口不一樣

要使用if語句來判斷設(shè)備當(dāng)前環(huán)境，首先根據(jù)設(shè)計(jì)師給出的高保真圖完成PC端和移動(dòng)端的頁面，制作出pc端頁面和移動(dòng)端頁面；因?yàn)樵O(shè)備環(huán)境是用來判斷用戶當(dāng)前使用的客戶端環(huán)境，進(jìn)而去通過if語句判斷選擇顯示哪種ui，所以需要在舞臺初始化或者寬度變化下，調(diào)用系統(tǒng)組件里的客戶端環(huán)境

如果當(dāng)前處于pc端，那么我們就讓pc端的頁面顯示，如果當(dāng)前處于移動(dòng)端，那么我們就讓移動(dòng)端的頁面顯示，按照上面的步驟我們就完成了用if判斷當(dāng)前設(shè)備環(huán)境進(jìn)而完成頁面的自適應(yīng)。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。