移動端web開發總結，web開發總結

移動端web開發總結，web開發總結

　　前一個星期實戰完一個PC端的基於HTML+CSS的項目，這幾天則接觸了移動端的開發，同樣也是在HTML+CSS的基礎上完成。雖然第一次接觸移動端的開發，但在開發過程中，我也是按照PC端的開發步驟來進行工作。首先切圖布局，同樣可以先總體規劃，分析哪些是可以作為組件來使用的。在這次移動端項目中，可以作為組件來使用的部分也挺多的。這樣一來就提高了我們的開發效率。移動端的web開發主要對象為手持功能，所以與PC端的開發區別是為不必考慮瀏覽器安全色性問題，而是考慮在不同尺寸裝置下的適配問題。

　　1、首先我們在使用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，因為我們不希望使用者放大縮小頁面） 

　　2、CSS媒體查詢

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

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

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