Differences of PX, EM, REM,%, VW, VH, VM



pxPixel is the basic unit that we often use now. For example, the computer pixel we often hear is 1024×768, which means that there are 1024 pixels in the horizontal direction and 768 pixels in the vertical direction.


emReference is the parent element’sfont-size, the default font size is 16px, so 1em is not a fixed value because it inherits the font size of the parent element


remThe reference object is relative to the root element. When we use it, we can set a reference value in the root element. Compared with EM, it can reduce a lot of calculation work. For example:html10px, 12rem is 120px


%Is the ratio set relative to the size of the parent element,position:absolute;The element of is relative to the positioned parent element,position:fixed;The element of is a relative visible window


VM width relative to the viewport. The viewport is divided equally into 100 units

h1 {
    font-size: 8vw;

Another example: Browser width 1200px, 1 VW = 1200px / 100 = 12 PX


VM width relative to the viewport. The viewport is divided equally into 100 units

h1 {
    font-size: 8vh;

Another example: Browser height 900px, 1 VH = 900px / 100 = 9 PX


VW: 1vw is equal to 1% of the viewport width.
  2. VH: 1vh is equal to 1% of the height of the viewport.

However, it is not recommended to use because of its poor compatibility. Currently, PX and rem are very comfortable to use,

Amway’s website for converting units helps to better understand the multiple relationship between the commonly used PX / EM / REM:
Http://pxtorem.com/px conversion rem

Http://pxtoem.com/px conversion em

Recommended Today

Configure Apache to support PHP in the Apache main configuration file httpd.conf Include custom profile in

In Apache’s main configuration file / conf/ http.conf Add at the bottom Include “D:workspace_phpapache-php.conf” The file path can be any In D: workspace_ Create under PHP file apache- php.conf file Its specific content is [html] view plain copy PHP-Module setup LoadFile “D:/xampp/php/php5ts.dll” LoadModule php5_module “D:/xampp/php/php5apache2_2.dll” <FilesMatch “.php$”> SetHandler application/x-httpd-php </FilesMatch> <FilesMatch “.phps$”> SetHandler application/x-httpd-php-source </FilesMatch> […]