移動端web開發總結

　　前一個星期實戰完一個PC端的基於HTML+CSS的項目，這幾天則接觸了移動端的開發，一樣也是在HTML+CSS的基礎上完成。雖然第一次接觸移動端的開發，但在開發過程當中，我也是按照PC端的開發步驟來進行工做。首先切圖佈局，一樣能夠先整體規劃，分析哪些是能夠做爲組件來使用的。在此次移動端項目中，能夠做爲組件來使用的部分也挺多的。這樣一來就提升了咱們的開發效率。移動端的web開發主要對象爲手持設備，因此與PC端的開發區別是爲沒必要考慮瀏覽器兼容性問題，而是考慮在不一樣尺寸設備下的適配問題。

　　一、首先咱們在使用Media的時候須要先設置下面這段代碼（寫在head標籤裏）：

　　　　<meta name="viewport" content="width=device-width,maximum-scale=1,user-scalable=no"/>　　　

　　　　這段代碼的幾個參數解釋：

• width = device-width：寬度等於當前設備的寬度

• initial-scale：初始的縮放比例（默認設置爲1.0）  

• minimum-scale：容許用戶縮放到的最小比例（默認設置爲1.0）    

• maximum-scale：容許用戶縮放到的最大比例（默認設置爲1.0）   

• user-scalable：用戶是否能夠手動縮放（默認設置爲no，由於咱們不但願用戶放大縮小頁面） 

　　二、CSS媒體查詢

　　指定樣式表規則用於指定的媒體類型和查詢條件。設置在不一樣尺寸的設備下的顯示內容。

1. @media screen and (max-width: 960px){
2.     body{
3.         background: #000;
4.     }
5. }

　　上述代碼描述了當屏幕小於等於960px時的樣式。若屏幕小於等於960px，其頁面背景色爲黑色的。