移动端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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值