Mobile: UI diagram px Unit conversion calculation method of REM units

Briefly, EM.

The EM units are determined relative to the parent element font size. Say:

    font-size:12px;    元素宽度是2em;    那么实际的宽度是 24px.(具体为什么，可以去查询资料，今天主讲rem)

Briefly, Rem.

REM is determined relative to the root element (HTML) font size. Say:

            宽度            字体    手机A： 320px            14px    手机B： 460px             ?    为了能达到可以同等比的放大缩小，那么，可以进行很简单的运算：?=14*460/320    

A REM calculation that converts PX into a practical operation on a UI diagram

1. The first step: Design the benchmark value of the label, feel free to decide how much. Arbitrarily set: 20px

2. The second step: look at the graph that the UI colleague gives you, what is the width? The general UI to the diagram will give a big point, because the big picture cut down, when the screen small point, will not be distorted, but if the small map enlarged, it is not very good ... Say

   一张图 宽度749px 高度234px;  你的浏览器模拟器以iphone6来定基，也就是宽度为375px;那么根据等比例缩放，你的模拟器高度为h=375*234/749=117.1562px那么实际的rem的计算值为：宽度：375/20 = 18.75rem高度: 117.1562/20 = 5.8578rem;

3. Step three: Start the conversion. is actually different screen width, as long as the transformation of the root element of the font-size, you can adjust all the element width and height display. And this, only through JS to achieve

               基准屏幕               真实屏幕宽度          375px               clientWidth字体          20px                ?js代码：window.onload = function(){    document.documentElement.style.fontSize = 20*document.documentElement.clientWidth/375 + ‘px‘}

4. Fourth step: Check your page.

Off Topic

Now there are a lot of plug-ins that can calculate the REM value directly, you don't have to count every time you're wide, otherwise you won't be able to survive. Concrete implementation can see this article https://www.cnblogs.com/jf-67/p/7171830.html

Mobile: UI diagram px Unit conversion calculation method of REM units