⚠️ Note: This article was written on July 22, 2017

Before the words

I haven’t written a tutorial for a long time (possibly misleading novice tutorial (~ ▽ ~)”).

This is my Github, welcome front end big people to study and communicate with me github.com/pwcong

Recently, I joined the company to do front-end internship, and learned the mobile TERMINAL H5 page adaptation in the past few weeks. (Never done mobile web sites at all before, still on wechat)

So let me write down a little bit of knowledge I’ve learned and share it with newbies.

The body of the

0x00 indicates roughly

The big difference between mobile web and PC is that the resolution of the mobile window is wide.

A lot of times the UI gives only one copy of the design, or according to the iphone6 design, which makes it difficult to adapt the front end to other mobile terminals such as 6plus or android.

Fortunately, Alibaba disclosed its mature adaptation plan, Lib-Flexible, at the end of 2015. As for its reliability, please refer to the mobile page of annual Tmall activities.

The usage of this scenario would be something like this: lib-flexible styles and JS libraries are introduced for HTML headers, the width and height of containers or components are mainly in rem, and the font size remains in PX.

Another constraint is that, because it’s mobile-only, we limit the width of the outermost wrapped div to 640px

Here is a brief introduction to how to use Lib-flexible for mobile adaptation. If you need further explanation, please read the following article: github.com/amfe/articl…

0 x01 is introduced into the lib – flexible

The latest library files can be downloaded here: github.com/amfe/lib-fl…

Clone the file from the build directory to find the flexibility.css and flexibility.js in the HTML header, for example:

<! DOCTYPE html> <html lang="zh-CN"> <head> <title>lib-flexible demo</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> ... <link href="css/flexible.css" rel="stylesheet"> <script src="js/flexible.js"></script> </head> <body> ... </body> </html>Copy the code

0 x02 calculationremvalue

Rem depends on the value of font size, for example, 1rem = 16px by default. Therefore, by changing font size at different resolutions, it can be adapted to different mobile devices.

For a detailed understanding of REM calculation, please refer to this article www.cnblogs.com/azhai-biubi…

Rem to do width and height stereotyping has a biggest problem is how to calculate the problem of font size, how to calculate the font size can be displayed in different resolutions under the same effect?

Don’t worry, Lib-Flexible already calculates the rem adjustment benchmark automatically as you resize your window. All you have to do is follow the design diagram and calculate the REM value for different resolutions on your mobile phone.

Here’s a diagram:

It doesn’t matter if you don’t understand, I will follow the flexible tutorial.

If the UI gives this design (UI that can’t find a job (/▽)) :

Okay, I can see at a glance the spicy chicken:

  1. This is the UI design draft of iphone5 as the standard, and the width of the device window is640px
  2. A middle block, centered, with a background color of#0075a9Margin – top100px, the width of240px, the height of120px

Next, we calculate the REM value, and the calculation formula is very simple:

Px value to be converted/width of the design document PX value x 10

Calculate the above size and convert it into the following statement:

  1. This is the UI design draft of iphone5 as the standard, and the width of the device window is10rem
  2. A middle block, centered, with a background color of#0075a9Margin – top1.5625 rem, the width of3.75 rem, the height of1.875 rem

0x03 Type code according to the design manuscript given by the UI that cannot find work

<! DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/flexible.css" rel="stylesheet"> <script src="js/flexible.js"></script> <style> html, body{ width: 100%; height: 100%; position: relative; padding: 0; margin: 0; overflow: hidden; } body{ background: #333; } .container{ overflow-x: hidden; overflow-y: auto; position: relative; height: 100%; max-width: 640px; background-color: white; margin: 0 auto; } .block{ margin: 0 auto; Margin - top: 1.5625 rem; Width: 3.75 rem; Height: 1.875 rem; background-color: #0075a9; } </style> </head> <body> <div class="container"> <div class="block"></div> </div> </body> </html>Copy the code

0x04 Browsing Effect in Mobile Terminal with Different Resolutions

As you can see, the results are pretty much the same across multiple devices

The latter

You may say that my case is too small to be convincing.

So get your hands on it and use Lib-Flexible in your mobile web projects to see if you can solve the mobile page adaptation problem.