1. 程式人生 > >移動端知識梳理

移動端知識梳理

元素 sessions nbsp 元素屬性 ora 其余 scroll 網頁 form

  • 插件:

    • swiper
    • iscroll
    • ejs(主要應用於node.js)
    • zepto(同jq用法一樣,更適合於移動端)
    • less
  • H5:

    • 新增標簽
      • header
      • footer
      • section
      • time
      • main
      • nav
      • ...
    • 對於input新增表單元素屬性,以及新增類型的優勢
      • email
      • tel
      • url
      • search
      • date
      • time
      • number
      • color
      • week
      • month
      • range(音量)
    • ->在移動端表單元素中沒有keydown/keyup事件(移動端的見怕是虛擬鍵盤),這兩個事件(輸入內容事件)統一使用input事件代替:[ELEMENT].oninput=function(){}
    • ->placeholder:在IE(10以下,10兼容,但是不是很好,可以理解為不兼容)下不兼容,如何使用JS來模擬。
  • audio/video:移動端音頻/視頻(公認為本次升級最偉大之處)

    • ->在真實項目中應用audio都是做背景音樂播放(專門做音樂播放器的很少,基本上就是做音樂的公司):src、preload、autoplay、loop、controls、play()、pause()、paused...
    • ->真實項目中的video不是直接使用最簡單的內置播放器(用到的屬性和方法和audio差不多),就是直接使用別人封裝好的播放器插件:tvplayer、騰訊視頻插件...
  • 新增加的一些JS的API

    • ->本地存儲:webStorage(localStorage/sessionStorage)
    • ->離線緩存(不是很穩定):xxx.manifest(手機斷網情況下依然可以觀看網頁中的內容,就是應用離線緩存技術事先把內容存儲到本地)
    • ->webSocket/socket.io
    • ->獲取地理位置的方法:真實項目中獲取到經緯度、精準度後,會把這些信息發送給第三方地圖接口,從而獲取到我們需要的一些信息
  • CSS3

    • 選擇器
    • 倒入字體圖標
    • 常用屬性:border-radius/box-shadow/text-shadow...
    • 背景變革:background-image/-color/-position(雪碧圖、圖片精靈、)CSS-Sprite/-attachment
    • background-size/-clip/-origin
    • 背景顏色的線性和放射性漸變
    • filter的高級應用:反色、灰度
    • 盒子模型:
      • box-sizing:border-box/content-box(默認)
      • columns:多列布局
      • flex:彈性伸縮盒子模型
      • 變形:transform
      • 動畫:transition animation
  • 響應式布局: + ->PC和移動端用一套的使用(外層盒子寬度百分比,其余都是寫死的,拿@media(國際通用規範)在不同設備中一點點的調整樣式) + ->REM(懶人做法),一般應用於當卡項目僅僅是在移動端設備上訪問的(在PC端部兼容) + ->flex不是響應式布局方案,僅僅是某些特殊的效果用這個來做而已

  • webApp/Hybrid模式: 把我們做的H5頁面運行在瀏覽器中或者其他App的webView中就是基於Hybrid混合模式開發的webApp項目 微信二次開發僅僅是在我們寫好的H5頁面基礎上調取微信提供的接口(調取接口的時候需要配合後臺使用): https://mp.weixin.qq.com/wiki

  • 兼容:

    • 兼容ios和安卓
      • -webkit-transfrom:
      • transfrom:

移動端知識梳理