Mobile: project actual combat

By Wireless

Project actual combat

First, flexible.js library

  1. Function
      2. < li>flexible is a flexible layout solution launched by Taobao, which can solve the problem of mobile device adaptation
  2. Function
    • Add the tag and dynamically rewrite it tag
    • Add the data-dpr attribute to the element, and dynamically rewrite the value of data-dpr
    • Add the font-size attribute to the element, and dynamically Rewrite the value of font-size
  3. flexible.js download: https://github.com/amfe/lib-flexible

    < /li>

  4. Steps to use
    • Introduce flexible.js into the project, don’t write viewport tags
    • How to write css
      • The unit size is based on the size of the 750 design draft, converted to the value of rem unit, the conversion method is: design draft Size / design draft basic font size
      • Design draft basic font size = design draft width/10, for example, the design draft width is 750, the design draft basic font size is 75; the design draft width is 640, the design draft baseline The font size is 64; (Taobao’s solution can be used in any design draft size)

Second, iScroll frame

  1. Solve the pain points
    • iScroll will be born, mainly because whether it is on iphone, ipad, android or earlier mobile Webkit does not provide a native way to support scrolling content in a fixed-height container
    • The above situation leads to all web-app requirements. Simulate into an app When it looks like, it can only be composed of an absolutely positioned header or footer plus a middle area where the content can be scrolled
    • iScroll frame solution The pain point is that it can simulate this missing feature and provide a native way to support scrolling content in a fixed-height container
  2. Official website< /li>
    • Download address: http://cubiq.org/iscroll-4
    • The 4 version is the most stable, with more data, and convenient to use
  3. Compatibility
    • iPhone/Ipod touch >=3.1 .1
    • iPad >=3.2
    • Android >=1.6
    • Desktop Webkit, Firefox, Opera, etc.
  4. Features
    • Pull refresh, accurately capture elements
    • Speed ​​and performance improvement
    • Compatibility Questions
  5. Main role in the project
    • The function of the iScroll framework-analog app function

      < /li>

    • Handle compatibility issues on the mobile terminal, and improve the speed and performance of the project
    • As for the parameter method of the framework itself, we Not used here

Three, Less use

Four. Animation library animate.css library

  1. Solve the pain points
    • When designing more complex animation effects by yourself, it is time-consuming and inefficient

      • In order to effectively complete various animation effects, I wrote some of the more commonly used animation effects into an animation library, so that everyone can complete the css3 animation

  2. Introduction
    • animate.css has a lot of typical css3 animations built in, with good compatibility, easy to use, and can be used across browsers An animation library. It is worth using in projects that need to write animation
    • https://daneden.github.io/animate.css/
  3. How to use the animation library
    1. The first type
      • First introduced animate.css library file
      • Add the specified animation style name to the specified element
      • Two class names are included here. The first is a basic style name that must be added. Any element that wants to animate must add this class name. The second is the specified animation style name
      • If you want to dynamically add an animation style to an element, you can do it through jquery
      • $(‘#demoId’).addClass(‘animated shake’)
    1. Second type
      • No need to introduce the animate.css library file
      • Find the desired animation name through the effect display, open the animation library, and pass Find the desired effect code by name
      • Copy the effect code in the animation library directly to your own css
      • Add it yourself Animation rules can be used
    2. Comparison of the two methods:
      • The first one will cause code redundancy and is simple to use
      • The second method does not have code redundancy and is relatively complicated to use, but the second method is still recommended

flexible. js download: https://github.com/amfe/lib-flexible

Introduce flexible.js into the project, do not write the viewport tag

css writing

iScroll will be born, mainly because no one is provided on iphone, ipad, android or earlier mobile webkit A native way to support scrolling content in a fixed-height container

The above situation causes all web-apps to be simulated as apps, only an absolute positioning Header or footer plus a middle area that can scroll the content The method supports scrolling content in a fixed-height container

Download URL: ht tp://cubiq.org/iscroll-4

The 4 version is the most stable, with more data, and it’s easy to use

Desktop Webkit, Firefox, Opera, etc.

The native function of the iScroll framework-simulating app function

Handling mobile compatibility The problem, it can also improve the speed and performance of the project

In order to effectively complete various animation effects, so some of the more commonly used animation effects are written into an animation library , It is convenient for everyone to complete css3 animation

animate.css has a lot of typical css3 animations built in, which is compatible, easy to use, and an animation library that can be used across browsers. It is worthwhile for us to use it in projects that need to write animation

Animation library usage

First introduce the animate.css library file

$(‘#demoId’).addClass(‘animated shake’)

No need to introduce animate.css library File

Copy the effect code in the animation library directly to your own css

, , ,

Leave a Comment

Your email address will not be published.