首頁(yè)電商視覺(jué)設(shè)計(jì)技術(shù)文章正文

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

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

1.1 視口標(biāo)簽

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

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

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

document.documentElement.clientWidth

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

因?yàn)槭謾C(jī)分辨率的問(wèn)題我們?nèi)绻谝苿?dòng)頁(yè)面中采用默認(rèn)的980做為顯示寬度，那么元素的顯示大小就不能按著我們“腦子”里認(rèn)為的大小來(lái)顯示，所以我們可以通過(guò)設(shè)置viewport的大小來(lái)讓元素按著正常的比例顯示。

注意：

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

02 user-scalable: yes 表示允許用戶通過(guò)手指縮放頁(yè)面，no 表示不允許

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

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

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

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

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

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

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

Var iScale = 1;

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

// 拿到這個(gè)像素比之后我們就需要重寫(xiě)一下上面的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中新增的一個(gè)單位，它就是頁(yè)面根節(jié)點(diǎn)字體的大小，現(xiàn)在主流的做法就用當(dāng)前設(shè)備的寬度除以10 ，得到的一個(gè)基數(shù)加在html的身上做為它的字體大小，有了它以后下面網(wǎng)頁(yè)里的元素單就可以用它來(lái)?yè)Q算。

// 動(dòng)態(tài)設(shè)置rem大小：用當(dāng)前設(shè)備的寬度/10

var iWidth = document.documentElement.clientWidth;

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

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

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

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

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

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

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

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

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

04 將成功訪問(wèn)的地址生成二維碼

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

注意：

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

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