行動端web開發總結

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

　　1、首先我們在使用Media的時候需要先設定下面這段程式碼（寫在head標籤裡）：

　　　　　　　

　　　　這段程式碼的幾個參數解釋：

• 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.     }
}

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

🎜🎜