移動端(1)

標籤：ios   idt   分析   彈性盒   initial   a標籤   旋轉   and   切換   

一、課程大綱

1.     基礎事件

touchstart

touchmove

touchend

2.     event對象

取消預設事件

阻止冒泡

防止文字選中和阻止預設菜單

滑鼠事件延遲

事件點透問題

3.     touchEvent

touches

changedTouches

targetTouches

4.     滑屏處理

拖拽原理分析

滑屏投影片簡版

5.     transform2D變換

rotate() scale() skew() translate()

left和top引起的迴流問題及最佳化

處理transform中不能通過計算計算後樣式擷取的問題

6.     transition動畫

transtion基本知識點

貝茲路徑運動

transitioned事件

transition不執行的bug

7.     執行個體 移動端版音悅台首頁製作

rem布局適配

橫豎屏切換適配

fixed定位的bug及替代方案

滑屏導航緩衝回彈動畫的實現

完整版無縫滾動的滑屏投影片

滑屏選項卡

8.     transform3D

滑動旋轉的方塊

3d多邊體製作

正n邊形的外角計算與正n邊形的中心點計算

9.     3d案頭切換

百分比適配怪異盒模型布局適配

animation的loading動畫

立體三稜柱製作

頁面絕對座標擷取

ios下3d變換 的相容問題及解決方案

10.    

二、基礎知識

1.     像素

iphone5 640*1136像素 物理像素

px 邏輯像素 瀏覽器使用的抽象單位 640*1136的div不能在iphone5上鋪滿

dp,pt裝置無關像素

dpr裝置像素縮放比

1px=(dpr)^2*dp 平面上

1px=dp*dp 緯度

2.     viewport

* ios的viewport=980

手機瀏覽器預設為我們做了2件事

        頁面渲染在一個980px(ios)的viewport 縮放

視窗縮放sacle

 

3.     meta標籤

設定viewport

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

minimum-scale

maximum-scale

user-scalable使用者能否縮放

4.     設計移動web

方案1 根據裝置的實際寬度來設計(常用)

方案2 1px=1dp 縮放0.5

1px邊框和高清圖片都不需要額外處理

這2種都不好

5.     彈性盒子布局

flex：1； 1/n

混合劃分：

水平垂直置中：

常見布局

相容性：

        ios可以使用最新的flex布局

        android4.4及以上可以使用最新的flex布局

        android4.4以下使用舊flex

6.     響應式設計

媒體查詢是核心

百分比

彈性圖片 即圖片大小為百分比

重新布局，顯示與隱藏 絕對位置(經常切換位置的元素)

7.     特別樣式處理

圖片大小用dp

1px邊框

rem根據html的font-size為相對單位，rem=screen.width/20，font-size不應該使用rem而使用px

8.     互動事件 touch

移動web上的click事件響應都要慢300ms

使用Tap(自訂)事件代替click事件

Tap事件的點透bug:點擊蒙層，下面元素的click會觸發

9.     touch事件

touch android bug

彈性滾動：

上拉載入：scroll事件 而不是touch事件

10.    

三、 

移動端(1)