UI培訓(xùn)之移動頁面制作準(zhǔn)備工作

更新時間:2016年03月26日10時03分來源:傳智播客UI培訓(xùn)學(xué)院瀏覽次數(shù):

1.1 視口標(biāo)簽

視口標(biāo)簽（viewport）它可以理解為就是用來顯示網(wǎng)頁內(nèi)容的區(qū)域。

在早期我們設(shè)計的網(wǎng)頁都是針對桌面設(shè)備而設(shè)計的，因為這些設(shè)備的屏幕分辨率很大，所以我們不用擔(dān)心顯示不全的問題。隨著移動端的興起，如果我們直接將這些頁面平移到移動設(shè)備上，必然會因為手機(jī)尺寸太小從而讓這些頁面不能正常顯示。所以蘋果公司最先提出了視口標(biāo)簽的做法，具體做法就是給手機(jī)設(shè)備定一個默認(rèn)的顯示大小，絕大多數(shù)設(shè)備都是980px。此時我們就可以讓之前的頁面正常的在移動設(shè)備上顯示（此時因為分辨率的問題，顯示大小是有問題的）

1.2 視口標(biāo)簽獲取

document.documentElement.clientWidth

1.3 Meta標(biāo)簽設(shè)置viewport

因為手機(jī)分辨率的問題我們?nèi)绻谝苿禹撁嬷胁捎媚J(rèn)的980做為顯示寬度，那么元素的顯示大小就不能按著我們“腦子”里認(rèn)為的大小來顯示，所以我們可以通過設(shè)置viewport的大小來讓元素按著正常的比例顯示。

注意：

01 width: 用來設(shè)置當(dāng)前視口的大小，可以設(shè)置具體的數(shù)值，也可以寫 device-width 關(guān)鍵字，用當(dāng)前設(shè)備寬度來做為顯示區(qū)域（最合適的視口大小）

02 user-scalable: yes 表示允許用戶通過手指縮放頁面，no 表示不允許

03 initial-scale: 表示默認(rèn)情況下頁面的縮放系數(shù)，一般為1

04 maximum-scale || minimum-scale 設(shè)置最大和最小的縮放比例。

1.4 動態(tài)設(shè)置像素比

為了讓所有設(shè)備下都能夠按著正常的比例來完全顯示我們用屏幕分辨率大小設(shè)計的網(wǎng)頁，需要我們動態(tài)的設(shè)置像素比。

每塊屏在出廠的時候都會自帶一個顯示比例，我們稱之獨立像系比：屏幕分辨率/屏幕尺寸，這個值默認(rèn)不是我們設(shè)置的，但是我們可以通過

window.devicePixelRatio來獲取當(dāng)前屏的比例，假如它的值為2，就表示在當(dāng)前這個屏幕下，css中的1px 只占0.5個物理像素，也正是因為這個原因才會顯得高清。

有了上面的比例之后我們?nèi)绻朐诋?dāng)前設(shè)備里完全顯示設(shè)計稿，就可以按著一定的比例來縮放這個設(shè)計稿（ 1/window.devicePixlRatio ），此時我們就能夠百分百之的還原屏幕分辨的設(shè)計稿。

Var iScale = 1;

iScale = 1/window.devicePixelRatio // 當(dāng)前屏幕的獨立像素比

// 拿到這個像素比之后我們就需要重寫一下上面的viewport標(biāo)簽內(nèi)容

document.write( '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale='+ iScale +', maximum-scale='+ iScale +', minimum-scale='+ iScale +'">' );

1.5 Rem單位設(shè)置

Rem 就是css3中新增的一個單位，它就是頁面根節(jié)點字體的大小，現(xiàn)在主流的做法就用當(dāng)前設(shè)備的寬度除以10 ，得到的一個基數(shù)加在html的身上做為它的字體大小，有了它以后下面網(wǎng)頁里的元素單就可以用它來換算。

// 動態(tài)設(shè)置rem大?。河卯?dāng)前設(shè)備的寬度/10

var iWidth = document.documentElement.clientWidth;

document.getElementsByTagName('html')[0].style.fontSize = iWidth/10+'px';

此時1rem 就相當(dāng)于64px，但是我們寫頁面的時候單位是配合使用的并不是一個單位一用到底。

1.6 本地測試頁面（一切以真機(jī)為主）

1 利用chrome瀏覽器來模擬測試，通過右擊審查元素......此處需要注意選中一個機(jī)型之后就必須要刷新一次頁面

2 購買主機(jī)和域名將自已做完的頁面上傳，然后直接拿公網(wǎng)地址進(jìn)行真機(jī)測試（土豪專用）

3 本地配置服務(wù)器進(jìn)行真機(jī)測試( wampserve || xampp )

01 安裝xampp軟件到某一個目錄，然后啟動相應(yīng)的服務(wù)。

02 在xampp的默認(rèn)訪問目錄（ htdocs ）下新建一個www文件夾，然后將我們的項目放入。

03 在地址欄中用本機(jī)的ipv4地址去訪問相應(yīng)目錄下的文件

04 將成功訪問的地址生成二維碼

05 利用電腦共享wifi,針后讓設(shè)備連接上它，此時我們可以直接通過設(shè)備來訪問上面的頁面。

注意：

01 獲取本機(jī)ipv4地址：window+r-->cmd-->ipconfig ( 網(wǎng)絡(luò)管理 )

本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處。謝謝！
作者：傳智播客UI培訓(xùn)學(xué)院
首發(fā)：