移动端rem字体适配示例

虽然很简单，但是为了需要的时候能直接 ctrl + C / ctrl + V ，还是写一下存着。嘿嘿


@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);
    }
}

 这里以iphone6为例，1rem就是16px，若font-size为12px就是0.667rem，用在字体上还好，要是其他元素也采用rem单位，频繁计算就很麻烦了，以下整理了一份便于计算的↓

@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;
    }
}

这样的话，计算起来就容易多了。例如一个盒子分别是100px，123px，字体13px，转成rem就是：10rem, 12.3rem, 1.3rem  以下是PC端媒体查询，算法一样的！！

PC端媒体查询↓

    // 媒体查询↓
    @media screen and (min-width: 1024px){
      html {
        font-size: 7.5px;
      }
    }
    @media screen and (min-width: 1100px) {
      html {
        font-size: 8.05px;
      }
    }
    @media screen and (min-width: 1280px) {
      html {
        font-size: 9.37px;
      }
    }
    @media screen and (min-width: 1366px) {
      html {
        font-size: 10px;
      }
    }
    @media screen and (min-width: 1440px) {
      html {
        font-size: 10.54px;
      }
    }
    @media screen and (min-width: 1680px) {
      html {
        font-size: 12.3px;
      }
    }
    @media screen and (min-width: 1920px) {
      html {
        font-size: 14.06px;
      }
    }

 

转载于:https://www.cnblogs.com/LLLLily/p/10977761.html