標籤：style class blog java http ext
由於公司的發展的需要，我被安排到移動站做前端，說起移動端的開發，對我來說追溯到我2011年的時候就有接觸過，只不過那時候是做app開發，與現在的移動web開發有相當的區別。做移動開發也正合我今年的工作計劃。從個方面來說，挺感謝自己的領導給我這個機會及對我的信任。
對於我們現在公司在移動web端的前後端開發都是從零開始，各方面的技術架構都不夠系統全面，也正因為這樣的一個公司，它能給每個做技術的人，一個自我學習提高及突破的平台。怎樣去把不完善的東西健全完善起來，這就是你在這塊的成長，公司業務也得到發展。
在前一個月中，為了趕在世界盃開幕前做一個與其相關的業務。公司專門成立了一個項目組加班加點的，確保在那個時間節點能把這個產品誕生出來。結果，我們按時完成了，不過也多少也些不完美。
在這個項目我個人學到了還蠻多東西的，雖然這些東西在大部分做過移動開發的同學眼中可能早於不是啥新技術啦。but對於我還是第一次開發移動web的新鳥來說，這些東西如甘泉雨露，對於做技術的能每天學到一點自己所不知曉的東西，就真的從內心的開心。下面讓我講講我學到的一些比較膚淺的東西，大家看了覺得學到了知識的給贊，沒學到的可拍磚，可扔iphone，我全收了。
我記得我做第一個移動頁面的時候，發現我的做頁面可以使用瀏覽器的預設觸控手勢進行頁面的放大縮小，產品經理就不幹了，死活不讓頁面有這個預設的縮放功能。沒辦呀，誰叫自己不是產品經理唄，自己只好google了。
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
結果就是在head中加上上述代碼搞定。裡面的一些設定屬性大家英文比較好的一看就明白是啥意思，但是如果想對其更深刻的瞭解，大家就自行google，百度啦。
大家或多或少的知道一些瀏覽器會內建一個UI樣式。我遇到一個比較突出的是iphone上submit按鈕的預設風格，與我們設計師設計出來的不一樣，這下設計師不高興了。so為了搏妹子一笑，咱去找google先生。解決結果如下
.subtn{ -webkit-appearance: none; -moz-appearance: none; appearance: none}
原來瀏覽器還有appearance這個屬性，這個屬性還相當的強大，只不過每個瀏覽器的預設風格差異很大。想瞭解更多的可閱讀《使用CSS3的appearance屬性改變元素的外觀》瞭解更 多。
下面這個情況做過移動web開發的都差不多遇到過，就是當你點擊一個連結或者通過Javascript定義的可點擊元素的時候，它就會出現一個半透明的灰色背景。但是，大部分情況下我是不需要這個高亮。解決方案：
.nav_a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
這個關鍵在最後一個值0，意思是把顏色的alpha值為0。更多css3的進階屬性
做網站當然就少不了使用icons。現在國外現在很流行把表徵圖轉換成web字型，國內部分網站也有用，雖然這有它的優勢；但這些也有不足之處，比標必須是純色之類的。我這裡主要說的是用圖片做icon的時候，圖片變得很虛。有問題，就有解決的方法：
.m_okhqb_header .dib {width:35px;height:30px;background:url(http://s2.hqbcdn.com/mobile/v0/images/icons/sp_icos_2.png) no-repeat 0 2px;
background-size:50px auto;}
上面的css重點在於sp_icos_2.png要比實際圖片大一倍，再通過background-size去設定成其大小的一半，不過至於是不是一定要設定成其一半的大小，大家可以試試。
下面介紹三個相關布局的css屬性，相當實用。
box-sizing 屬性
box-sizing 屬性允許您以特定的方式定義匹配某個地區的特定元素。
box-sizing有三個屬性值content-box，border-box，inherit。這裡我重點說下border-box。
當box-sizing的屬性值為border-box時，表示通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。看下面的css代碼：
.box {box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */width:200px; height:100px;float:left;padding:50px 50px 0;}
這段css表示類為box的元素的總的寬度為200px，左右內邊距為100px，而這個元素的內容寬度問100px。不知道這樣大家能否理解，不理解的話可以自己親自試試。再不懂可點《CSS3 box-sizing 屬性》瞭解更多。可能大家會問這個到底有什麼作用，它在移動站的響應式布局時，時常不知曉寬度的時候是非常有作用。
box-flex 屬性
box-flex 屬性規定框的子項目是否可伸縮其尺寸。（可伸縮元素能夠隨著框的縮小或擴大而縮寫或放大。只要框中有多餘的空間，可伸縮元素就會擴充來填充這些空間。）
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title> box-flex </title><style type="text/css">* {margn:0; padding:0;}.box {background:blue;width:600px;height:100px;display:-webkit-box;display:-moz-box;display:box;}.box .p1 {-webkit-box-flex:1.0;-moz-box-flex:1.0;box-flex:1.0;background:yellow;}.box .p2 {-webkit-box-flex:2.0;-moz-box-flex:2.0;box-flex:2.0;background:green;}</style></head><body><div class="box"><p class="p1">p1</p><p class="p2">p2</p></div></body></html>
在使用這個css屬性的時候，一定要在其父元素上(這裡就是.box)設定display:box;當然現在瀏覽器還不支援這個屬性，所有必須帶上私人首碼（-webkit，-moz...）。這個屬性現在移動端也是非常好用的，特別是布局是平分的時候。瞭解更多《CSS3 box-flex 屬性》
display:table 與 display:table-cell
第一個表示的是：此元素會作為塊級表格來顯示（類似 <table>），表格前後帶有分行符號。
第二個表示的是：此元素會作為一個表格儲存格顯示（類似 <td> 和 <th>）
這兩個結合起來用，可以元素類是表格的布局。在移動端上這兩個應該使用的頻率也是蠻高。
其中的布局作用，這裡就不好怎麼講解，大家可以在實際的布局中嘗試，才能體會其中的妙處。
好了，也寫了這麼多，這也就是我在過去的一個月中，學到的其中的一部分知識點，分享給大家，希望對剛接觸移動web開發的同學有一點點小協助。移動上的技術不比pc上的容易，相反，我覺得移動端上要學的還很多。極少成多，滴水石穿，希望自己能在移動這塊有自己的建樹。依然歡迎大家一起交流討論，提高他人進步同時也是自己的進步！！！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
