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