移动web前端小结
在智能手機橫行的時代，作為一個web前端，不會編寫移動web界面，的確是件悲催的事情。當公司準備做一個微信的微網站時，作為一個多年經驗的web前端碼農，我迷茫了，真心不知道從何下手。
接下來就是搜一堆教程，然后開始編寫代碼，三天后，我的第一個移動端web頁面編寫完成。
回頭想想，移動端的web頁面代碼編寫遠沒有我想的那樣復雜（可能是我做的這個項目比較簡單的緣故）。但是就入門來說，其實是蠻簡單的，我把他總結為一下幾個方面：特殊的meta標簽／百分百比布局寬度／rem設置字體大小／css3的使用。
好吧，讓我們開始吧，以下是移動web新手的淺見，老鳥請繞行，如有賜教不勝感激。
1.特殊的meta標簽； 因為現在我們用的智能手機（iOS，Android）的瀏覽器都是基于webkit內核，這里有一些針對webkit的特殊meta標簽，在開發移動端web是起到很重要的作用：
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
強制讓文檔的寬度與設備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽；
<meta content="yes" name="apple-mobile-web-app-capable" />
復制代碼
iphone設備中的safari私有meta標簽，它表示：允許全屏模式瀏覽；
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
復制代碼
iphone的私有標簽，它指定的iphone中safari頂端的狀態條的樣式；
復制代碼
告訴設備忽略將頁面中的數字識別為電話號碼。
復制代碼
Android中禁止自動識別頁面中的郵件地址，iOS中不會自動識別郵件地址；
（注：由于webkit的瀏覽器對于html5的支持比較好，所以我們在聲明頭部的時候最好用html5的聲明方式。當然如果你習慣了html4，那我只能告訴你，還是先學學html5在接著看吧！）
2.百分百布局； 拿到設計師的640px（以iPhone4的比例做的設計稿）的設計稿后，我就嚴格的按照設計稿設置了各個模塊的高度／字號。接下來悲催的事情發生了，寫出來的頁面在手機上顯示的異常大。我傻了，這是嘛情況！后來咨詢專業人士才了解到，雖然iphone4的分辨率是960x640px，但是其屏幕的像素密度比較高，它的實際大小應該是減半的。所以在寫代碼時一切的高度／字號都要是設計稿的1/2。接著說百分比布局： 在做移動web頁面時，我們要用百分比布局來實現自適應屏幕寬度。有pc端web頁面開發經驗的同學就會知道，元素的盒子模型（不清楚的同學可以去w3school上查查）。 那我想要一個元素100%顯示，又必須有一個固定的padding-left／padding-right，還有1px的邊框，怎么辦？
復制代碼
這樣編寫代碼必然導致出現橫向滾動條，腫么辦？要相信問題就是用來解決的。這時候偉大的css3為我們提供了box-sizing屬性，對于這個屬性的具體解釋不做贅述（想深入了解的同學可以到w3school查看，要知道自己動手會更容易記憶）。讓我們看看如何解決上面的問題：
復制代碼
好的，問題被解決了！
3. rem設置字體大小； 在這里讓我們花一些梳理一下css中的單位：px／em／rem（以下內容摘自0101后花園） px：就是css中最基本的長度單位了，用px做單位基本上沒什么問題，可以做到讓頁面按套路精確的展現。但是，（聽到但是的時候是不是突然有些不適，就像每次開發的同學喊我的時候，我的潛意識會告訴自己，壞了又出bug了！！）如果全篇用px布局會暗藏一個問題，就是當用戶和Ctrl滾頁面的時候（說白了就是ctrl+，ctrl-），你會發現頁面結構產生了不可預知的錯亂，因此有磚家倡導使用em替代px。 em：em是相對單位，em相對的基準點就是瀏覽器的字體大小（瀏覽器默認字體為16px），所以1em默認等于16px。那么14px＝0.875em; 公式是14/16=0.875em。用em來寫的話，就可以解決ctrl+，ctrl-時造成的頁面錯亂問題。
可是，問題又來了，em準確的說是相對于父節點的字號來計算的，如果自身定義了字號那么就相對自身字號來計算，舉例如下：
復制代碼
看明白了吧，1em并不是一個固定不變的值，再加上數學是體育老師教的，這不是自作孽嗎。沒關系，css3為我們引入一個新的單位就是rem可以解決這個問題。
rem：rem和em一樣也是一個相對單位，為了方便理解，我們就理解rem為root em，顧名思義rem只相對跟節點<html>計算，這就是說只要在根節點設定好參考值，那么全篇的1rem都相等，計算方式同em，默認1rem=16px; 同理你可以設定html { font-size:62.5% } 那么1rem就等于10px，以此類推 …（當然萬惡的ie678不支持rem，但是還好我們在做的是移動端web頁面）
4.使用css3； 做這種高大上的移動web頁面怎么能少的了css3。不過平時css3用的比較少，這里記下幾個我在這個項目中用到的css3屬性。更深入的親們自己去學咯。同樣，這里不對屬性做贅述，放著強大的w3school不用，我只能對你說：藥不能停啊！：
A.圓角（這個太常用了）
復制代碼
B.漸變（這個在做按鈕的時候很常用）
復制代碼
C.去掉手持設備點擊時出現的透明層 （一般會在頭部做格式化）
復制代碼
在應用了此屬性時，鏈接的active屬性會實效，解決的方法是，在頁面unload時運行document.addEventListener("touchstart", function(){}, true);使active狀態可用。（注：在小米系統下，點擊鏈接仍然會出現紅色的邊框，各位同學如有解決方法，請賜教，不勝感激。）
D.改變盒子模型（上面已講過）
復制代碼
5.關于調試；
好了，有了上面的知識，我們就可以寫一個移動的頁面了。但不要太樂觀了，我們要怎么調試呢？難道每寫一個頁面就發一次服務器，然后用手機訪問測試環境！當然不需要那么麻煩，如果是用pc機的同學，可以用一個本地localhost工具調試（這次就不要各位自己動手了，附送上我自己用的工具。用法很簡單，把所有的頁面放到一個文件夾中，頁面放在根目錄下，工具也放在跟目錄下，把你要調試的頁面改成index.html。當然如果你有好幾個頁面，最好還是做一個index頁面。啟動調試器，用手機訪問你電腦的ip，要保證手機所用的wifi和pc的網絡在一個網段）。用mac的同學就到網上找一篇localhost的配置方法，開啟以下這個功能就可以訪問了。
1.特殊的meta標簽； 因為現在我們用的智能手機（iOS，Android）的瀏覽器都是基于webkit內核，這里有一些針對webkit的特殊meta標簽，在開發移動端web是起到很重要的作用：
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
強制讓文檔的寬度與設備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽；
<meta content="yes" name="apple-mobile-web-app-capable" />
復制代碼
iphone設備中的safari私有meta標簽，它表示：允許全屏模式瀏覽；
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
復制代碼
iphone的私有標簽，它指定的iphone中safari頂端的狀態條的樣式；
- <meta content="telephone=no" name="format-detection" />
復制代碼
告訴設備忽略將頁面中的數字識別為電話號碼。
- <meta content="email=no" name="format-detection" />
復制代碼
Android中禁止自動識別頁面中的郵件地址，iOS中不會自動識別郵件地址；
（注：由于webkit的瀏覽器對于html5的支持比較好，所以我們在聲明頭部的時候最好用html5的聲明方式。當然如果你習慣了html4，那我只能告訴你，還是先學學html5在接著看吧！）
2.百分百布局； 拿到設計師的640px（以iPhone4的比例做的設計稿）的設計稿后，我就嚴格的按照設計稿設置了各個模塊的高度／字號。接下來悲催的事情發生了，寫出來的頁面在手機上顯示的異常大。我傻了，這是嘛情況！后來咨詢專業人士才了解到，雖然iphone4的分辨率是960x640px，但是其屏幕的像素密度比較高，它的實際大小應該是減半的。所以在寫代碼時一切的高度／字號都要是設計稿的1/2。接著說百分比布局： 在做移動web頁面時，我們要用百分比布局來實現自適應屏幕寬度。有pc端web頁面開發經驗的同學就會知道，元素的盒子模型（不清楚的同學可以去w3school上查查）。 那我想要一個元素100%顯示，又必須有一個固定的padding-left／padding-right，還有1px的邊框，怎么辦？
- element{
- ? ?? ???width: 100%;
- ? ?? ???padding-left: 10px;
- ? ?? ???border: 1px solid blue;
- }
復制代碼
這樣編寫代碼必然導致出現橫向滾動條，腫么辦？要相信問題就是用來解決的。這時候偉大的css3為我們提供了box-sizing屬性，對于這個屬性的具體解釋不做贅述（想深入了解的同學可以到w3school查看，要知道自己動手會更容易記憶）。讓我們看看如何解決上面的問題：
- element{
- ? ?? ???width: 100%;
- ? ?? ???padding-left: 10px;
- ? ?? ???box-sizing:border-box;
- ? ?? ???-webkit-box-sizing:border-box;
- ? ?? ???border: 1px solid blue;
- }
復制代碼
好的，問題被解決了！
3. rem設置字體大小； 在這里讓我們花一些梳理一下css中的單位：px／em／rem（以下內容摘自0101后花園） px：就是css中最基本的長度單位了，用px做單位基本上沒什么問題，可以做到讓頁面按套路精確的展現。但是，（聽到但是的時候是不是突然有些不適，就像每次開發的同學喊我的時候，我的潛意識會告訴自己，壞了又出bug了！！）如果全篇用px布局會暗藏一個問題，就是當用戶和Ctrl滾頁面的時候（說白了就是ctrl+，ctrl-），你會發現頁面結構產生了不可預知的錯亂，因此有磚家倡導使用em替代px。 em：em是相對單位，em相對的基準點就是瀏覽器的字體大小（瀏覽器默認字體為16px），所以1em默認等于16px。那么14px＝0.875em; 公式是14/16=0.875em。用em來寫的話，就可以解決ctrl+，ctrl-時造成的頁面錯亂問題。
可是，問題又來了，em準確的說是相對于父節點的字號來計算的，如果自身定義了字號那么就相對自身字號來計算，舉例如下：
- html { font-size: 100%; }
- .box-0 {
- ? ? height: 1em; /* 此時height等于16px */
- }
- .box-1 {
- ? ? font-size: 0.625em; /* 此時基準字號以變更為16*0.625=10px */
- ? ? height: 1em; /* 此時實際height等于10px */
- }
復制代碼
看明白了吧，1em并不是一個固定不變的值，再加上數學是體育老師教的，這不是自作孽嗎。沒關系，css3為我們引入一個新的單位就是rem可以解決這個問題。
rem：rem和em一樣也是一個相對單位，為了方便理解，我們就理解rem為root em，顧名思義rem只相對跟節點<html>計算，這就是說只要在根節點設定好參考值，那么全篇的1rem都相等，計算方式同em，默認1rem=16px; 同理你可以設定html { font-size:62.5% } 那么1rem就等于10px，以此類推 …（當然萬惡的ie678不支持rem，但是還好我們在做的是移動端web頁面）
4.使用css3； 做這種高大上的移動web頁面怎么能少的了css3。不過平時css3用的比較少，這里記下幾個我在這個項目中用到的css3屬性。更深入的親們自己去學咯。同樣，這里不對屬性做贅述，放著強大的w3school不用，我只能對你說：藥不能停啊！：
A.圓角（這個太常用了）
- element{
- ? ?? ???border: 1px solid blue;
- ? ?? ???-moz-border-radius: 3px;
- ? ?? ???-webkit-border-radius: 3px;
- ? ?? ???border-radius: 3px;
- }
復制代碼
B.漸變（這個在做按鈕的時候很常用）
- element{
- ? ?? ???background-image: -moz-linear-gradient(top, #2288cc, #389de2); /* Firefox */
- ? ?? ???background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #389de2), color-stop(1, #2288cc)); /* Saf4+, Chrome */
- }
復制代碼
C.去掉手持設備點擊時出現的透明層 （一般會在頭部做格式化）
- a,button,input{
- ? ?? ???-webkit-tap-highlight-color: rgba(0,0,0,0);
- ? ?? ???-webkit-tap-highlight-color: transparent; /* For some Androids */
- }
復制代碼
在應用了此屬性時，鏈接的active屬性會實效，解決的方法是，在頁面unload時運行document.addEventListener("touchstart", function(){}, true);使active狀態可用。（注：在小米系統下，點擊鏈接仍然會出現紅色的邊框，各位同學如有解決方法，請賜教，不勝感激。）
D.改變盒子模型（上面已講過）
- element{
- ? ?? ???box-sizing:border-box;
- ? ?? ???-webkit-box-sizing:border-box;
- }
復制代碼
5.關于調試；
好了，有了上面的知識，我們就可以寫一個移動的頁面了。但不要太樂觀了，我們要怎么調試呢？難道每寫一個頁面就發一次服務器，然后用手機訪問測試環境！當然不需要那么麻煩，如果是用pc機的同學，可以用一個本地localhost工具調試（這次就不要各位自己動手了，附送上我自己用的工具。用法很簡單，把所有的頁面放到一個文件夾中，頁面放在根目錄下，工具也放在跟目錄下，把你要調試的頁面改成index.html。當然如果你有好幾個頁面，最好還是做一個index頁面。啟動調試器，用手機訪問你電腦的ip，要保證手機所用的wifi和pc的網絡在一個網段）。用mac的同學就到網上找一篇localhost的配置方法，開啟以下這個功能就可以訪問了。
總結
- 上一篇： php前端工程师岗位职责,【前端软件工程
- 下一篇： 【全栈开发】精通 MEAN: 使用 ME