Mobile End (1)

I. Outline of the course

1. Base Events

Touchstart

Touchmove

Touchend

2. Event Object

Cancel Default Event

Stop bubbling

Prevent text from selecting and blocking default menus

Mouse Event Latency

Incident Point Penetration problem

3. TouchEvent

Touches

Changedtouches

Targettouches

4. Sliding screen Processing

Analysis of the principle of drag and pull

Slide-screen Slides simple version

5. transform2d Transform

Rotate () scale () skew () translate ()

reflux problems and optimization caused by left and top

Dealing with problems that cannot be obtained by calculating the calculated style in transform

6. Transition Animation

Transtion Basic Knowledge points

Bézier curve Motion

Transitioned events

Transition not executing the bug

7. Example mobile end version of the music table home production

REM Layout adaptation

Switch to fit with the screen

Fixed positioning Bug and alternative solutions

Implementation of slide-screen navigation buffer rebound animation

Full Version seamless scrolling slide screen

Slide Screen tab

8. Transform3D

Slide the rotated block

3d multilateral system for

outer corner Calculation of positive n-side shape and center point calculation of positive n-side shape

9. 3d Desktop Switch

Percent fit weird box model layout adaptation

Animation's loading animation

Three-dimensional triangular prism making

Page absolute coordinates get

compatibility issues and solutions for 3d transformations under iOS

.

Second, the basic knowledge

1. Pixels

Iphone5 640*1136 Pixel physical pixels

PX Logic Pixel browser uses abstract units 640*1136 Div cannot be covered in iphone5

DP,PT device independent pixels

DPR device pixel scaling ratio

1px= (DPR) on ^2*DP plane

1PX=DP*DP Latitude

2. Viewport

* iOS viewport=980

Mobile browser Default for us to do 2 things

Page rendering on a 980px (iOS) viewport zoom

Window Zoom sacle

3. Meta Tags

Set viewport

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

Minimum-scale

Maximum-scale

User-scalable user can Zoom

4. Designing Mobile Web

Scenario 1 is designed according to the actual width of the device (common )

Scenario 2 1PX=1DP Scaling 0.5

No additional processing required for 1px borders and HD images

None of the 2 are good .

5. Flexible box layout

Flex:1; 1/n

Mixed partitioning:

Horizontal Vertical Center:

Common layouts

Compatibility:

iOS can use the latest flex layouts

android4.4 and above can use the latest flex layouts

android4.4 use old flex below

6. Responsive design

Media query is the core

Percentage

Elastic picture is the picture size as a percentage

Re-layout, show and hide absolute positioning (elements that switch positions frequently )

7. Special style handling

Picture size with DP

1px border

REM based on the font-size of the HTML as a relative unit,rem=screen.width/20,font-size should not use REM and use px

8. Interactive Event Touch

The Click event response on the mobile web is slower 300ms

Replace the click event with a Tap (custom) event

Tap Event BUG: Click on the Mask, the click of the element below will trigger

9. Touch Events

Touch Android Bug

Elastic scrolling:

Pull-up load:Scroll event instead of Touch event

.

Third,

Mobile End (1)