preface

I came across an interview question titled px, EM and REM. I would like to take this opportunity to sort out the common front end size units and summarize their usage and differences

Those dimensions at the front

Generally speaking, the author saw several size units of px, RPX, EM, REM, %, vw, VH, VM, and then introduced these size units respectively

A, px

Px is short for “pixel”

A px is the smallest point in a device or image. Many people think that px in CSS is an absolute unit that represents a physical pixel on the screen. In fact, this is not true. They may also have different physical pixel sizes. A device with a higher physical pixel size will store more pixels per unit area, so the picture will look finer. In general, on a PC, CSS pixels will be close to the actual pixel size, but on a mobile device, depending on the resolution of the model, A PX in CSS may correspond to a different number of physical pixels

Features: the commonly used unit of web design, also is the basic unit, used the px unit can be set fixed layout or size of the element Cons: no elastic, rigid size, use page on multiterminal, cannot adapt to the effects, such as from PC to mobile terminal when cutting style may blow up, but the pure PC general won’t appear such problems

Second, the %

% The unit of percentage as the name implies

% is generally based on the parent element. For example, if an element is given margin-left as a percentage, it will look for the parent element to be calculated as a percentage, but there are a few exceptions such as:

For position: Absolute is relative to the parent element that has been positioned. For position: fixed is relative to the ViewPort. For Transform 2D horizontal movement change, it is relative to itself

Third, the vh

Vh CSS3 abbreviation for the new unit view height

Vh is similar to a percentage of the height of a window. It divides the height of a window into 100 parts relative to the height of the window. 10vh is 10% of the window

Fourth, the vw

Vw CSS3 added a unit called view Width which stands for vw which is similar to VH

Five, the vm

Vm CSS3 added a single unit

The VM is to select the smallest width or height in the viewport, and then divide it into 100 equal parts like vw and VH. For example: 1200px width 900px height 10VM is 90px

Six, em

Em A unit of relative length

Em is calculated relative to the font size a size, his is twice as large as the font size, such as relative font size of 16 px, em em unit 1 rem = 16 px used elements if their set the font size, then the relative to its own calculations, if their not set font size it will inherit the parent element’s font size, If the parent element is not set, it will be looked up (because the font size is inherited), and if the font size is not set in the page, it will be based on the browser’s default font size of 16px

Seven, rem

Rem CSS3 adds a relative length unit

Like em, REM is a unit of relative length, but REM is only relative to the font size of the root HTML element. This means that if the font size of the root HTML element is set to 18px, then the value of REM is converted to 1rem = 18px globally

Supplement:

  1. Rem is often used in the production of responsive pages, because we can dynamically adjust the size of root elements according to different device sizes, and use REM unit to achieve the effect of adapting to different device sizes. Some adaptive page frame units are based on this feature
  2. Sometimes we set the font size of the root element to 62.5% for conversion purposes, and then adjust it as needed, because 62.5%*16px = 10px, which is 1rem = 10px

Eight, the RPX (upx)

RPX Response px unit

The responsive PX unit was first proposed by the small program in order to solve the deformation problem of PX on the mobile terminal, which is very easy to occur in different models

Take uniapp’s implementation of RPX as an example: Uniapp specifies that the base width of the screen is 750rpx. The developer can calculate the RPX value of the page by using the base width of the design as follows:

Design 1px/Design baseline width = frame style 1rpx / 750 RPXCopy the code

In other words, the formula for calculating the size of RPX unit element is

750 * The width of the element in the draft/the baseline width of the draftCopy the code

For example:

  1. If the design width is 750px and the width of element A is 100px on the design, then the width of element A in uni-app should be 750 * 100/750, resulting in 100rpx
  2. If the design width is 640px and the width of element A is 100px on the design, then the width of element A in uni-app should be 750 * 100/640, resulting in 117rpx

Note:

  1. RPX is essentially a width-related unit, so the wider the screen, the larger the actual pixel value. This is the unit for scaling according to the width of the screen. If you don’t want to scale according to the screen, don’t use RPX
  2. Pay attention if you use RPX in your fonts, your fonts will also change with the width of the screen
  3. RPX does not support sizing when switching between portrait and landscape, so if you are using RPX, it is recommended to lock the screen orientation
  4. Designers can use the iPhone6 as a visual standard
  5. If the designer’s basic design width is not 750, it is very troublesome for us to calculate manually every time. At this time, we can turn on the UPX configuration, which is explained in the UniApp official website. This means that the user can configure 1px to be converted to 1upx at uniapp compile time, but the upX is converted to RPX based on the size of the base drawing that the user sends in. This means that the user does not have to calculate how many RPX elements on the page should be calculated if the design is not 750px. Uniapp will directly convert the PX to the calculated RPX