rem的使用在移动端非常广泛的,但是很多小童鞋,包括我自己在内,有时候使用的方法都是错误的,下面我们一起来讨论下,rem到底该如何使用才能兼容手机端所有手机。
在使用rem之前,我们必须给html设置一个相对的font-size,然后让rem相对于这个字体的大小进行设置。这样才能在手机端正常浏览和使用,只要我们设置了html的font-size,那么我们对于div元素的宽高,我们都可以直接使用rem作为单位使用了。
为了让页面上的所有元素能够兼容所有了浏览器,保证rem的宽高一样。那么我们得给html设置一个font-size的值为625%(切记,移动端一定要设置成625%,PC端可以设置为62.5%)。相关代码如下:
html{
font-size: 625%;
}
然后在html元素上我们应该这样使用rem
body{
font-size: 0.16rem;/*字体为16px*/
}
header{
width:6.4rem;/*设置header宽度为640px*/
height:0.45rem;/*设置高度为45px*/
}
h1{
font-size:0.2rem;/*设置字体为20px*/
}
问题所在,如果我们在手机端使用的html默认字体为62.5%,那么就会出现以下的问题,webkit内核浏览器解析rem会出现相关问题,如下图所示,火狐能够正常解析处理这个问题,但是chrome确无能为力啊。

上面图片显示的代码如下,你要是想尝试下,可以将此代码复制后,自行进行测试下不同浏览器下的不同显示效果吧。