The mobile terminal adapted exemplary font rem

@media screen and (min-width: 320px) {
     html {
        font-size: 13.65333px;
    } 
}

@media screen and (min-width: 360px) {
    html {
        font-size: 15.36px;
    }
}

@media screen and (min-width: 375px) {
    html {
        font-size: 16px;
    }
}

@media screen and (min-width: 384px) {
    html {
        font-size: 16.384px;
    }
}

@media screen and (min-width: 412px) {
    html {
        font-size: 17.5787px;
    }
}

@media screen and (min-width: 414px) {
    html {
        font-size: 17.664px;
    }
}

/*以下忽略*/

@-webkit-keyframes addEffect {
    99% {
        transform: scale3d(1,1,1) translate3d(0,0,0);
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes addEffect {
    99% {
        transform: scale3d(1,1,1) translate3d(0,0,0);
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-ms-keyframes addEffect {
    99% {
        transform: scale3d(1,1,1) translate3d(0,0,0);
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes addEffect {
    99% {
        transform: scale3d(1,1,1) translate3d(0,0,0);
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes likeEffect {
    0% {
        opacity: 0;
        transform: scale3d(0,0,1);
    }
    20% {
        opacity: 0.4;
        transform: scale3d(.4,.4,1);
    }
    100% {
        opacity: 1;
        transform: scale3d(1,1,1);
    }
}

@-moz-keyframes likeEffect {
    0% {
        opacity: 0;
        transform: scale3d(0,0,1);
    }
    20% {
        opacity: 0.4;
        transform: scale3d(.4,.4,1);
    }
    100% {
        opacity: 1;
        transform: scale3d(1,1,1);
    }
}

@-ms-keyframes likeEffect {
    0% {
        opacity: 0;
        transform: scale3d(0,0,1);
    }
    20% {
        opacity: 0.4;
        transform: scale3d(.4,.4,1);
    }
    100% {
        opacity: 1;
        transform: scale3d(1,1,1);
    }
}

@keyframes likeEffect {
    0% {
        opacity: 0;
        transform: scale3d(0,0,1);
    }
    20% {
        opacity: 0.4;
        transform: scale3d(.4,.4,1);
    }
    100% {
        opacity: 1;
        transform: scale3d(1,1,1);
    }
}

 Here to iphone6 ​​for example, 1rem is 16px, if font-size is 12px is 0.667rem, used in the font Fortunately, if the other elements are also using rem units, frequently very troublesome calculation, the following finishing an easy calculation ↓

@media screen and (min-width: 320px) {
     html {
        font-size: 8.533px;
    } 
}

@media screen and (min-width: 360px) {
    html {
        font-size: 9.6px;
    }
}

@media screen and (min-width: 375px) {
    html {
        font-size: 10px;
    }
}

@media screen and (min-width: 384px) {
    html {
        font-size: 10.24px;
    }
}

@media screen and (min-width: 412px) {
    html {
        font-size: 10.99px;
    }
}

@media screen and (min-width: 414px) {
    html {
        font-size: 11.04px;
    }
}

In this case, it is much easier to calculate. For example a box, respectively 100px, 123px, font 13px, rem is transformed into: 10rem, 12.3rem, 1.3rem