移動web前端的一些硬技能（二）動手前必須掌握的基本常識

標籤：

　　記得剛開始接觸移動端web的時候，書和網上的資料都不多，查起來很費勁，現在比以前要好很多了，可是還是會有一些剛接觸移動端的朋友會問我一些我最初會遇到的問題，或許是書本寫的並不那麼重，也或許是這些知識寫的太散，以至於大多數人並沒有很好的注意到。

　　

　　其實做移動web前端，大多數和pc端的web前端基本一樣，只是有一些東西需要注意一下，否則帶來的麻煩就不是一星半點鐘了。

　　

　　一、viewport

 

　　如果看過移動端web代碼的應該都會看到類似於這一句<meta name="viewport" content="width=device-width">。

 

　　其中，在w3c中對<meta>的解釋是“可提供有關頁面的元資訊（meta-information），比如針對搜尋引擎和更新頻度的描述和關鍵詞”，我個人的理解就是提供一些頁面的屬性資訊，供給給瀏覽器和伺服器請求，以便其返回適當的值。而viewprt是其元資訊中key-value中的key，意思是虛擬視窗。而後面跟的content是其value，可指定虛擬視窗的寬高。上面那句中“width=device-width”是說虛擬視窗寬度與裝置寬度等寬。通俗點說，viewport就是指的類似於我們PC上瀏覽器的大小，而不是電腦顯示屏的大小。（因為移動端瀏覽器都是全屏的，所以viewport也間接的等於了顯示屏的大小，但這隻是個...怎麼說呢，“巧合”吧，哈哈）。

 

　　說到這裡就根本停不下來了，因為還要解釋下虛擬像素和物理像素概念。

 

　　以前我們在PC上1像素，2像素都還算比較標準（當然，Mac推出的Retina屏那都是後來的事了），直到iPhone4推出高密度顯示屏，一切就發生了變化。iPhone4物理像素寬是640，但是返回的裝置寬度卻是320，也就是說，iPhone4的device-width的值是320px。

 

　　但是，注意，一般提到“但是”都是要出事的節奏——但是當我們不設定viewport的時候，iPhone預設設定的寬度就是980px，比如，我們做了個320px寬的頁面，不設定viewport，放在iPhone4的Safari瀏覽器裡就會變成下面的樣子

　　如果我們設定width=device-width， 或者width=320，再把剛才的頁面放進去，就會是下面的樣子。

　　也就是說，如果width=device-width了以後，頁面如果超過320px的寬，就會變成下面的樣子了。

　　為什麼我們要用iPhone4來舉例呢，那個手機已經過氣了，我上次拿去賣，人家才給300塊錢收= =...主要是這些最初都是有這個手機引起的，“創世紀”的東西都經典。扯遠了，回來——是不是說頁面寬度設成320就萬事大吉了呢，不是，畢竟市場上裝置繁雜，什麼尺寸都有，320隻是一部分手機的，Android機的像素比更複雜——對了，像素比！如果用chrome的類比工具應該都見過這個參數，其實就是物理像素與虛擬像素的比值。

 

　　有人可能會問，為什麼要搞這麼複雜，這應該是蘋果公司為了開發人員思考起來不複雜，所以才會返回這麼個虛擬像素值。但是製作網頁的時候，會有這種考慮——如果要在iPhone4這樣的手機上做一張貫穿左右的圖片，這個圖片是做320的合適，還是做640的合適？答案是盡量做640的，因為2倍像素比的手機，顯示1個虛擬像素，要用4個物理像素（田字格，橫2倍，豎2倍），即使圖片等比壓縮，圖片越精細，顯示效果越好，相反，如果320的，也只能適用於320，因為還沒考慮橫屏呢。。。，但是做移動web肯定要在不同尺寸的裝置來顯示，要衡量最大與最小的尺寸，這個就是最佳化網站的一個內容了，這個以後會提及。

　　

　　二、頁面的自適應

 

　　現在PC端用響應式的主要是國外的一些網站，這一點，他們總是走在前頭。在移動端，響應式一般用於橫屏和豎屏之間的轉換，為了提升使用者體驗來使用，也就是說，對於瀏覽器，需要多重分界點來判斷，對於移動端，只需要一個分界判斷就好了。

　　上面說的判斷，主要是指媒體查詢，@media出現比較早，但是用的似乎並不是很廣泛，這幾年才開始用的越來越多，而且早期主要是嵌在樣式引入標籤裡，比如：

　　<link rel="stylesheet" media="only screen and (max-width:320px)" href="style.css" />

　　但是這麼做，在dom載入的時候，引入的css也是會被下載的，只是不使用而已。而且這還會增加http請求，對於這麼珍貴的請求，這簡直是暴殄呀，當然，這也是一個最佳化的內容，以後詳述。總之，現在越來越多的用在css檔案中，採用區塊的方式寫入，等待使用者觸發，具體@media如何來用，外面的資料一大把，去看吧。

　　還有一種就是“百分比理論”，它也普遍存在，經常會有人困惑與此，我也不例外，到底採用哪一種更適合開發移動站。

　　百分比理論其實有點和bootstrap的流式柵格化類似，按照百分比來設定web頁面內的元素尺寸，這樣，在什麼樣的裝置都可以有一個比較“和諧”的展示，但是“放縱”終歸是會露尾巴的，尺寸一但誇張一點就會看起來非常彆扭，所以，按照實際項目自己忖度這個使用度，用好了，可以讓使用者感覺不到響應的縫隙，結合起來去做，還是很有意思的。

 

　　三、px、em與rem

　　w3c裡面對css的尺寸單位定義的很多，但是常用的只有兩個，px和em，rem是css3新增的，其實本質也是em，只不過是root em => rem。曾有一段時間em火了，後來又滅了，rem又火了，為什麼呢，這個問題要從這些單位的區別來說起。

　　px：像素 ，電腦螢幕上的一個點（引用自w3school）；em：相對尺寸，相對於上一級元素尺寸的倍數，值可以是浮點數；rem，如上述，相對於根節點字型大小的倍數。

　　最初的時候，瀏覽器只有改變字型大小的能力，em是相對大小，所以布局起來更給力，後來瀏覽器能力強了，不只是字型，可以全域改變，再加上em根據上級改變的特性，讓其修改的時候非常難掌控，容易出現牽一髮動全身，而我只是想撓撓頭而已的尷尬局面，所以人們又開始青睞簡單的px。不過好在css3推出了rem，這個根據根節點來改變大小的特性，使得人們對他的愛越來越多。

　　瀏覽器預設字型大小一般16px，也就是1em，也就是100%，為了使開發人員用起來更直觀，可以設定全域字型尺寸為62.5%，也就是說全域大小為16*62.5%=10px，這樣，12px=1.2rem了，能夠和px互相轉換，可以讓我們對字型大小值有個比較清晰該概念。

　　這個不止在移動端，在PC端同樣適用，這個時候，改全域就只需要改root的尺寸就好了。

　　再囉嗦一句，62.5%怎麼來的呢？1em分成16份，1px = 0.0625em，10px = 0.625em = 62.5%，這樣，假設我想設定一個18px大小的rem，那就是18/10 = 1.8rem.

 

移動web前端的一些硬技能（二）動手前必須掌握的基本常識