UI培訓之移動頁面制作準備工作

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

1.1 視口標簽

視口標簽（viewport）它可以理解為就是用來顯示網頁內容的區(qū)域。

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

1.2 視口標簽獲取

document.documentElement.clientWidth

1.3 Meta標簽設置viewport

因為手機分辨率的問題我們如果在移動頁面中采用默認的980做為顯示寬度，那么元素的顯示大小就不能按著我們“腦子”里認為的大小來顯示，所以我們可以通過設置viewport的大小來讓元素按著正常的比例顯示。

注意：

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

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

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

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

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

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

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

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

有了上面的比例之后我們如果想在當前設備里完全顯示設計稿，就可以按著一定的比例來縮放這個設計稿（ 1/window.devicePixlRatio ），此時我們就能夠百分百之的還原屏幕分辨的設計稿。

Var iScale = 1;

iScale = 1/window.devicePixelRatio // 當前屏幕的獨立像素比

// 拿到這個像素比之后我們就需要重寫一下上面的viewport標簽內容

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

1.5 Rem單位設置

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

// 動態(tài)設置rem大?。河卯斍霸O備的寬度/10

var iWidth = document.documentElement.clientWidth;

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

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

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

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