想必前端開發的同學們關於手機端一點都不陌生，隨著各種視口的設備越來越多，手機端web的開發已經成為前端求職技能必備，關於移動端web技能，學習一些工作中常用到的知識吧。
1、web前端領域，像素分為設備像素和CSS像素
2、在縮放比例為1:1的時候一個CSS像素的大小等於一個設備像素的大小。
3、一個CSS像素的大小是可變的，比如用後縮放頁面的時候，實際上就是在縮小或放大CSS像素，而設備像素無論大小還是數量都是不變的。
viewport模板
其實就是web移動端頭部該如何書寫：
<head>
<meta content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0″ name=”viewport” />
<meta content=”yes” name=”apple-mobile-web-app-capable” />
<meta content=”black” name=”apple-mobile-web-app-status-bar-style” />
<meta content=”telephone=no” name=”format-detection” />
<head>
這是不管是pc還是移動端web都首要考慮的問題，下面我們逐條解說一下：
第一個meta中width=device-width;表示viewport的寬度；
initial-scale=1.0;表示初始的縮放比例，我們可以以1:1 的比例進行頁面設計。
maximum-scale=1.0;允許用戶縮放到的最小比例；
user-scalable；用戶是否可以手動縮放；
第二個meta標籤是iphone設備中的safari私有meta標籤，它表示：允許全屏模式瀏覽；
第三個meta標籤也是iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式；
第四個meta標籤表示：告訴設備忽略將頁面中的數字識別為電話號碼。
其中第一條尤為重要！
移動端字體和字體大小的問題
瞭解到的手機系統 ios、android 等是不支持微軟雅黑字體，為了滿足產品的需要，保證視覺稿的還原度，手機端是如何定義微軟雅黑字體呢？
@font-face 定義為微軟雅黑字體並存放到 web 服務器上，在需要使用時被自動下載。這也不失為一種方法。
但是響應的會影響網站的打開速度，消耗用戶流量。其實用過各種不同系統撥並且關注過字體的小夥伴都知道，安卓與ios有數字自己默認的字體，並且系統默認的字體所達到的視覺效果跟使用微軟雅黑字體沒有明顯的差別，其實不用刻意去追求某種固定的字體。
媒體查詢
媒體查詢是響應式設計的基礎，也是web移動端不可或缺的一部分。
css中使用媒體查詢的語法：
eg：
@media all and (min-width: 321px) and (max-width: 400px){
.box{
background：red;
}
}上面代碼中，媒體類型為all，代表任何設備，並且設備的佈局視口寬度大於等於321px且小於等於400px時，讓擁有box類的元素背景變紅。
這些就是移動端一些常見的問題。最後貼上一個移動端簡單例子供大家學習：
http://action.weixin.qq.com/payact/readtemplate?t=mobile/2015/wxzfsht/index_tmpl