移动端字体适配小结

rem

首先,rem是相对根元素html字号的相对单位,一般默认字号是16px,那么1rem=16px

1.先设置header里面的meta标签:

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

2.用JS来计算适应用户屏幕的根元素字号

<script type="text/javascript">
   document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
</script>

上面的640是可以替换的,是设计稿中的宽度。

这样iphone8(375px)下html的font-size 就是14.0625px,iphone8p下font-size就是15.525px,设置一个元素font-size为 1.7066rem, 效果跟设置其font-size为 24px 是一样的(24 / 14.0625 = 1.7066)。
这种px->rem的计算可以用一些现成的工具例如postcss完成。

媒体查询

也可以用媒体查询,对不同的屏幕宽度设置不同的根元素字号

@media screen and (min-width: 375px){
    html {
        font-size: 14.0625px;   
    }
}
@media screen and (min-width: 360px){
    html {
        font-size: 13.5px;
    }
}
@media screen and (min-width: 320px){
    html {
        font-size: 12px;
    }
}
html {
    font-size: 16px;
}
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值