標籤：style blog http color width strong
1 移動端開發的背景 1.全球移動端裝置將會超過人口總數； 2.移動端上網時間超過pc端上網時間； 3.平板電腦、電子書閱讀程式、智能電視和手機等裝置每天下載數以百萬計的應用 。
總結：
面對這樣的挑戰，讓頭腦與目光保持一定的前瞻性是很重要的。
要想使自己的產品在佔有率及收入等方面取得持久性的成功，產品設計與開發的策略必須符合行動裝置 App的未來發展趨勢。
2 移動端開發和pc端開發的異同
2.1 效能差異 這是最顯著的一個差異。對移動開發影響最大的，就是效能問題，特別是功耗和流暢性問題。
2.2 操控方式 與PC機普遍採用滑鼠操控不同，行動裝置普遍採用觸控技術，操控方式的不同，在頁面互動的時候就要
利用好觸控的事件增加使用者體驗。
2.3 螢幕尺寸 行動裝置的螢幕尺寸 一般比較小，而且解析度多種多樣。
這樣就需要在頁面展示上面做
好相容。同時要
注意點擊地區的大小，尺寸過小的按鍵以及毫無間隔空間的布局極易引發誤操作。
2.4 互動方式 為了行動裝置螢幕的螢幕尺寸的限制，為了給使用者提供更大的閱讀空間和沈浸式的體驗，
越來越多的應用採用抽屜式導航，推崇“隱藏的藝術” 。
2.5 流量 移動用戶端本身的特性，決定了使用者比較關注流量的消耗。 所以
在頁面配置和製作上，要盡量精簡，加快頁面載入速度，最佳化使用者體驗。
3 移動端開發要注意的技巧
3.1 保持一個簡單的布局
屏棄冗餘的結構，保持頁面的簡單乾淨，內容一目瞭然。 見例子：vsco.co/
3.2 使用Medial Queries 簡單的說Medial Queries是一個媒體查詢，可以根據設定的尺寸，查詢出適配的樣式。好處就是可以根據使用者的使用裝置的當前寬度，讓Web頁面載入一個備用的樣式，實現特定的頁面風格。 @media screen and (max-width:300px) { /*Tiny styles*/ } @media screen and (max-width: 600px) { /*small styles*/ }
@media screen and (max-width:900) { /*big styles*/ }
3.3 定義斷點 定義斷點，那麼
斷點是什嗎？簡單的描述就是，裝置寬度的臨界點， 那麼在移動開發設計中，常見的斷點有六種，我們今後的Medial Queries條件判斷就可以根據這幾個斷點來定。
(1). 第一個斷點群體就是針對於智能手機設定，他的寬度是小於480px； (2). 第二個斷點是高智能行動裝置，比如說Ipads裝置，他的寬度是小於768px; (3). 添加一個小於320px的斷點，針對於小型的行動裝置； (4). 還可以添加適用於平板裝置的斷點，大於768px，小於1024px。
3.4讓你的布局更靈活 頁面設計可以適當地使用流體布局（也就是大家常說的調適型配置、液體布局、百分比布局）最適合各種類弄螢幕大小，結合正確的medial Queries，你可以製作出適應於任何可能出現的裝置頁面配置。
3.5圖片的自適應 一張圖片，有什麼方法可以讓他在不同的裝置上顯示能根據螢幕大小自適應？ 處理這種效果有一個方法，如果你的web頁面不會受到頻寬的影響（不考慮性 能），你可以先製作一圖片讓其適合最大螢幕，然後通過樣式來控制不同裝置下顯示的大小；另外一種辦法就是你可以為每個斷點準備不同的圖片。
3.6檢查你的viewport 玩過移動端的同學可能都知道，許多移動端的瀏覽器類比了案頭PC機下瀏覽器， 你的web頁面在移動端的瀏覽器瀏覽時，整個頁面會直接壓縮顯示在一個螢幕下。
參數： Viewport：可視地區 Width：viewport的寬度，取值device-width Initial-scale：初始縮放比例，取值1.0 Minimum-scale：允許使用者縮放最小比例，取值1.0 Maximum-scale：允許使用者放大最大比例，取值1.0 User-scalable：是否允許使用者縮放 MobileOptimized瀏覽器不會自動調整檔案大小，無法展開縮放 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <meta name=“format-detection” content=“telephone=no”> <meta name="format-detection" content="email=no"> <meta name="format-detection" content="address=no">
4 移動端涉及的前端技術
4.1 html5
語義更好，
裝置相容特性更好，支援網頁端的Audio、Video等多媒體功能， 能通過簡單的代碼實現更炫的效果，可以進行跨平台的使用，等等……4.2 css3 強大的層疊樣式表加強版，能通過簡單的代碼實現圓角，陰影，色彩坡形等等效果，減少圖片的應用，增加使用者體驗。4.3 js Zepto.js。移動頁面中的jquery，輕量級的手機js架構，Gzip壓縮後9.7k，能完成各種dom結構操作，ajax請求，觸屏事件，等等。 4.4 響應式布局搭建利器 foundation ，Ink,grumby,Maxmertkit,Bootstrap等等 利用這些利器，能夠快速搭建適應各種螢幕解析度的調適型配置。4.5測試載入器
遠端偵錯工具weinre
www.(csdn放太多網址竟然儲存不了，暈死，www.開頭) npmjs.org/package/weinre(csdn放太多網址竟然儲存不了，暈死，www.開頭)
五.移動端的相容和處理
總結了一些：
1.解析度相容（包括布局，斷點設定） 2.圖片相容（主要體現在頁面設計和css處理） 3.導航的設定
Author: Alone
Antroduction: 進階前端開發工程師
Sign: 人生沒有失敗，只有沒到的成功。
