The use _javascript techniques of unit RPX and REM in micro-letter Applet

Objective

This article is mainly to explain RPX and REM applied to the micro-letter applet, if you have not yet started, suggest that first from the below

Micro-Credit Program Official document

REM of >web app Revolution

Official documents of the >RPX unit

Introduction to >RPX Unit Foundation

If you read the above several articles, we start to get to the point of it ~ ~

First, the use of REM

1 JS to import the following section of code

(Function (doc, win) {
 var docel = doc.documentelement,
 resizeevt = ' orientationchange ' in window? ' Orientationchange ': ' Resize ',
 recalc = function () {
 var clientwidth = docel.clientwidth;
 if (!clientwidth) return;
 docEl.style.fontSize = * (clientwidth/320) + ' px ';

 if (!doc.addeventlistener) return;
 Win.addeventlistener (Resizeevt, Recalc, false);
 Doc.addeventlistener (' domcontentloaded ', Recalc, false);
}) (document, window);

2 to calculate the REM and PX Direct conversion formula according to the design draft width

For example:

640px design Draft, conversion formula is according to the above JS in this sentence and come "docEl.style.fontSize = * (clientwidth/320) + ' px '", the final 1rem = x 640/320 + ' px ' = 40px;

3) According to the design draft according to 1rem = 40px to each element for unit conversion

For example:

We measure an element width of 400px, so the final css writes WIDTH:400/40 = 10rem

The use of rem under normal conditions

Second, the use of RPX

1 conversion of RPX and PX in small programs

For example: Design draft 750px width

So congratulations, you PS on the amount of width is how much, then you define how many rpx, that is, 1px = 1rpx

For example: Design draft 640px width

So unfortunately, you need to convert 1px = 750/640 RPX

Conversion of RPX and PX in small programs

2 How to continue using REM in small programs

For example: Design draft 750px width

At this time the 1rem = (750/20) RPX = 37.5px

For example: Design draft 640px width

At this time the 1rem = (750/20) RPX = 32px

The use of REM in small programs

Note: no matter how much the design manuscript, REM and RPX conversions are always the same, but REM and PX are converted into REM = design draft width/20, which is completely different from the REM we use normally.

Summarize

Small program after all come out soon, the above remarks some belong to official documents, some belong to their own elusive, we can not all believe, to their own test to know. The above is the entire content of this article, I hope the content of this article for everyone's study or work to bring certain help, if you have questions you can message exchange.