The difference between px, rpx, em, rem, vw, vh various pixel units
px：
px is the abbreviation of pixel, which means pixel. px is the smallest point of a picture, and a bitmap is composed of countless such points, which is the most commonly used pixel unit in web development.
rpx：
The new unit officially launched by the WeChat Mini Program is suitable for the development of uni-app or WeChat Mini Program on the mobile terminal. It can be adapted according to the screen width, and 1rpx is actually equal to 1 physical pixel relative to the screen width. 1px can be approximately equal to 2rpx at design time.
em：
Relative unit, the reference object is the font-size font size of the parent element, which has the characteristics of inheritance. If the font-size attribute is defined by itself, it will be calculated according to itself. If it is not set, it will be calculated and adjusted according to the default text size of all current browsers or devices. Generally speaking, the default font size of the browser is 16px. In a complete page, the default em value of each module may be different.
rem：
New units introduced in CSS3. It is adjusted relative to the font-size attribute set by the root element (html), instead of relying on the font size of the parent element like em to cause confusion of different page text sizes.
vw：
Also new units introduced in css3, yes viewpoint width的缩写，意为视窗宽度. The window width 1vw is equal to 1% of the window width. That is to say, if the width of the current development browser or device is 1280px, then 1vw is equal to 12.8px. In the process of development and design, 100vw can truly occupy 100% of the current screen width.
vh：
The same is true for vh and vw, which are new units introduced in css3, yes viewpoint height的缩写, 意为视窗高度. The window height 1vh is equal to 1% of the window height. The calculation and use are the same as vw, so I won’t go into details here.