Vue
lib-flexible
px2rem-loader
In the spirit of Internet sharing I will share with you what I understand. Remember me. My name is’ black and white ‘

I found some information on the Internet, you can also go to read the font size thinking from netease and Taobao front-end design draft and workflow, mobile Web resource arrangement. However, WHEN I read the unit conversion, I am a little confused. I will tell you my own understanding to listen to you, and welcome you to leave a message to discuss different solutions.

Rem analysis of netease transformation

First of all, the design draft of netease is based on iPhone5, which is 640px in width. Then set 1REM to 100px (HTML font size: 100px), which is 6.4rem = 100% width = device width.

Since it is based on 6.4 REM development. The physical pixel of iPhone5 is 320px (DPR is 2.0). If you still want to make 6.4rem equal to the width of the device, you can only adjust the ratio of 1rem to font size, 320/6.4 =50 and 1rem=50px can be achieved. If you want to make iPhone6 adaptation only need 1REM = (375/6.4) = 58.59375px to achieve iPhone6 adaptation, this method can be adapted to the vast majority of mobile devices on the market.

Just add the following sentence to achieve the above effect.

Document. The documentElement. Style. FontSize = document. DocumentElement. ClientWidth / 6.4 + 'px';Copy the code

Taobao conversion REM analysis

This time let’s take iPhone5 (640px) design as an example. The idea of taobao is to make 10rem = page width = 100%, so 1rem = 64px, no matter how wide the current page is, and then scale the whole page through DPR Settings to achieve high fidelity effect.

The width of the iPhone5 is 640px, the final page is 640px, the DPR of the iPhone is 2,
scalable for iPhone5 Of course lib-Flexible does all that for us. I’m just saying, for those of you who are curious, how it works.

Vue-cli and Lib-flexible realize mobile terminal adaptive layout

CNPM intall lib-flexible // Install lib-flexible import 'lib-flexible' // import lib-flexible in SRC \main.jsCopy the code

If you have an element on iPhone5 that is 150px wide and 200px high, you want to calculate that the rem width is 150/64 = 2.34375rem and the height is 200/64 = 3.125rem.

As for DPR scaling, don’t worry about that. Lib-flexible has done it for you. All you need to worry about is px conversion REM.

Use PX2REM-loader to automatically convert PX into REM

CNPM intall px2REM-loader install px2rem-loaderCopy the code

In build\utils.js change to the following code.

// Add the following code to the cssLoaders method const px2remLoader = {loader:'px2rem-loader', options: { remUnit: Px2remLoader const loaders = options.usePostCSS? [cssLoader, postcssLoader, px2remLoader, lessLoader ] : [cssLoader, px2remLoader, lessLoader ]Copy the code

Afterword: I have been planning to write this article for a long time, but I haven’t had time to do it. After writing, I found that vm with REM layout scheme is very popular on the Internet recently, and Taobao has upgraded the layout scheme, changed the writing method of positioning mode. I’ll take a closer look at the VM solution. I will share an article with you then.