em rem px vw/vh difference

em

Relative to the font-size of the current element

div{
    font-size:10px;
    width:3em;//30px
}

rem

rem is root em, relative to the font-size of the root element element

html{
 font-size:20px;
}

div{
    font-size:10px;
    width:3rem;//60px
}

When it comes to rem, many people will think of rem adaptation. We can use media queries to set the size of font-size to achieve adaptation.

@media only screen and (max-width: 374px) {
    /* iphone5 或者更小的尺寸e */
    html {
        font-size: 86px;
    }
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
    /* iphone6/7/8等 */
    html {
        font-size: 100px;
    }
}
@media only screen and (min-width: 414px) {
    /* iphone6p 或者更大的尺寸 */
    html {
        font-size: 110px;
    }
}

px

In fact, there is nothing to explain about px. Everyone just uses px when they get started. px is pixel, the basic unit.

[Tips] The mini program will use rpx for compatibility, 1px = 2rpx. The principle of mini program rpx for compatibility is to use the screen width of 375 as the benchmark and use the percentage to adapt to the mobile terminal.

vw

1% of screen width

vh

1% of screen height