移動端導學

標籤：

• 移動端使用的模擬器
• 什麼是視口（viewpoint）
  • pc端視口的寬度和瀏覽器的寬度一樣
  • 布局視口：將pc頁面直接搬到移動端，視口寬度與瀏覽器寬度不關聯，完全獨立，甚至遠大於螢幕的寬度（普遍用法）
  • 視覺視口：視覺視口與裝置螢幕一樣寬，通過使用者的縮放而改變
  • 理想視口：讓使用者擁有最理想的瀏覽和閱讀，使用者進入頁面不需要再縮放來觀看（<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">) 快速鍵是meta:vp+tab
    • width=device-width 視口寬度等於裝置寬度
    • user-scalable=no 禁止縮放
    • initial-scale=1.0 頁面初始縮放程度
    • maximum-scale=1.0 最大縮放程度
    • minimum-scale=1.0 最小縮放程度
• 響應式布局的思想
  • 彈性網格布局、彈性圖片、媒體和媒體查詢整合起來，命名為響應式布局；
  • 技術點：盒模型、浮動、
  • 浮動：父元素中設定display：flex；將父元素轉化成彈性盒模型；並在子項目中加入flex:num,設定比例
    • 優點：面對不同解析度裝置靈活性強，能夠塊結解決多裝置顯示適應問題
    • 缺點：相容各種裝置工作量大，效率低下；代碼累贅，會出現隱藏無用的元素，載入時間加長
• 移動端使用的單位
  • em依據父級變化
  • rem依據根節點變化(r=root)
  • px像素 1em=16px=100%=12pt;
  • 百分比
  • pt points
• 移動世界的到來
  • 移動互連網的發展
  • 智能手機迅速發展
  • 移動web應用的發展
• 移動端開發和pc端開發的區別v
  • 裝置
  • 解析度 1024   1920  ....
  • 介面布局
  • 輸入特性（滑鼠 鍵盤 觸摸）......
測試
• pc：用各種瀏覽器測試
• 移動端：用模擬器（Android SDK【虛擬設備AVD】/ios模擬器/chrome）chrome用的最普遍
媒體類型（@media 媒體類型 、關鍵字（and  only  not） 、媒體特性（width/height寬高.device-width/device-height裝置寬高.orientation:landscape橫屏.orientation:portrait豎屏）{樣式代碼}）*css3*
• • all 所有裝置
  • Braille 盲文處決回饋裝置
  • embossed 盲文印表機
  • print 列印裝置
  • projection 投影裝置
  • screen 電腦顯示器
  • tv 電視機裝置
　　

外部分類別引入，實現多裝置適配：

　　　內部分類引入，實現多裝置適配：

 

移動端導學