JS in flexible.js to realize the flexible layout scheme Taobao _javascript skills

The content of this article is to introduce Taobao flexible layout scheme lib-flexible practice, share to everyone for your reference, the specific content as follows

1. Page Requirements

This is the page effect you want to do (don't comment on the design, it's not the developer's decision):

This is the dimension callout chart (750*1334):

Then the art in the 750*1334 design manuscript, according to my request to provide the following material cut map:

Includes two download button background picture, logo, bottom trapezoid gradient background and the body part of the mobile background image. Note that these pictures are all cut out in the 750*1334 design, so the size is the original size of the design draft, such as Android.png:

Considering the problem of Retina display screen, combined with the following diagram of the appropriate ideas:

I think the solution to the problem of retina screen is:

1 in the devicepixelratio<=2, the picture unified use 750 design manuscript Chettu

2 in devicepixelratio>=2, the picture unified use of 750*1.5=1125, that is, the so-called @3x design manuscript Chettu.

I put the artwork to my Chettu under 750*1334 's design manuscript under the img/@2x folder:

Then let her help to 750 of the design of the vector magnification 1.5 times times, and then follow the same Chettu requirements for me to provide @3x Chettu, and placed in the Img/@3x folder:

@3x under the picture theoretical size should be equal to @2x under the picture *1.5, but my cut is not so perfect.

With the previous requirements and material preparation, the next step is to introduce the core of the JS file, writing CSS style.

2. Introduction of Flexible.js

This step is actually very simple, as long as the content of the flexible.js copy out, a new local flexible.js file, open paste in on it, I put this file in the js/lib below:

Then in the HTML page, as early as possible to introduce this JS file (in order to adapt the effect of faster):

Note: Use lib-flexible, usually do not write:

Copy Code code as follows:

<meta name= "viewport" content= "Width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

to flexible.js automatic processing.

Then in the Chrome Simulator, select Iphone6, and you should see that the HTML font-size has been set to font-size:75px:

3. Write CSS
Basic requirements:

1) In addition to Font-size, the other sizes are based on 750 of the size of the draft, converted into REM unit value, the conversion method is: the size of the callout draft/callout base font size;

2) The callout base font size = The draft width/10, such as the callout width is 750, the callout base font size is 75, the callout is 640, the callout base font size is 64; (so taobao this scheme can be used under any design draft size)

3 If you need to set up font-size, you can follow the HTML DATA-DPR property to deal with, similar to the following wording:

[data-dpr= "2"] p {
  font-size:16px
}

[data-dpr= "3"] p {
  font-size:24px
}

Take the Android download button's style as an example to illustrate this usage. The android.png size is: 414*80, so the CSS writes:

. btn {
  width:414rem/@font-size-base;
  height:80rem/@font-size-base;
}

Because of the less, a variable was defined beforehand to hold the callout datum font size:

@font-size-base:75;
So the Px2rem conversion becomes very easy, as shown above. After the less is compiled, the correct REM value is computed:

. btn {
 width:5.52rem;
 Height:1.06666667rem;
}

To this end, Lib-flexible's basic practice is over, but there is a problem, that is, retina screen of the problem, to now have not mentioned @3x figure of those cut map how to do, in fact very simple, with the help of HTML element DATA-DPR attribute, can easily realize another media query, In order to enable the @3x under the devicepixelratio>=2 when the picture, or the Android download button style as an example, the wording is:

. btn-android {
 Background-image:url (".. /img/@2x/android.png?v=@ @version ");
 [data-dpr= "3"] & {
  Background-image:url (".. /img/@3x/android.png?v=@ @version ");
 }

This is OK, the original did not know what the role of DATA-DPR, now look, the role is quite large.

Note:

• 1 because the grunt build is used, you need to install node, git, and then install Grunt and bower via NPM
• 2 Taking into account the possible future full screen scrolling effect, so this page started with Fullpage.js to do, through the Bower introduced jquery and Fullpage.js library
• 3) Modular use of the Requirejs
• 4 Run Grunt default to complete the build, and then run Grunt server to start the static servers preview.

The above is the realization of Taobao flexible layout scheme lib-flexible the whole process of practice, I hope to learn some inspiration.